CSS类不起作用？id、类名、标签选择器的优先分析

技术频道 - html技术

CSS类不起作用？id、类名、标签选择器的优先分析

作者:admin 时间:2022-5-6 8:45:48 浏览:

定义了某个标签用的CSS类，结果发现不起作用，原因其实很明显，就是另外还有与之相关联的CSS定义，如果页面用到的CSS比较多且凌乱，那么检查起来就比较困难。CSS类不起作用的原因，其实就是继承与优先的问题。今天我将通过几个实例来分析这个问题。

实例

下面是一个完整的HTML实例。

HTML结构

<div class="wrap">
  <div class="content">
    <a href="http://www.webkaka.com/">content - 卡卡网 www.webkaka.com</a>
  </div>

  <div class="footer">
    <a href="http://www.webkaka.com/">footer - 卡卡网 www.webkaka.com</a>
  </div>
</div>

CSS

div.wrap a{color: blue;}
div.content a{color: red;}
.footer a{color: red;}

由于外层div的类.wrap已经定义了链接的颜色为blue。而我想在内层.footer的div把链接颜色设置为red。但代码执行结果不在预期，显示如下：

demo download

我们看到，内层定义的类.footer不起作用了。但同时又看到，另一个内层.content的div，其CSS的定义是有效的。为什么会出现这个情况呢？写法的差异！

CSS类不起作用的原因：继承与优先

实例中，.footer类名前，没有加上标签div，而.content类名前，加上了div标签。就是这个原因导致了实例中的显示结果。

如果想.footer类的div，按预期的想法来显示，那么就要把类名改一下写法，把.footer改为div.footer，我们看看改后的显示结果。

demo download

CSS定义优先比较：id、标签与类名

CSS定义可以用标签，例如p、div，span等，也可以用类名，例如.wrap 、.content，.footer等，还经常用到id来作为选择器，例如#header，#nav等。在实际使用中，经常出现多个CSS定义重叠作用的问题。这种情况下，浏览器渲染时就会按照CSS继承与优先的规则来执行。

用了标签定义CSS，再用类定义还有效吗？

我们看看下面一个实例。

<style type="text/css">
div a{color: blue;}
.footer a{color: red;}
</style>

<div class="footer">
  <a href="http://www.webkaka.com/">footer - 卡卡网 www.webkaka.com</a>
</div>

已经有了div的CSS定义，在HTML里，某个div比较特殊，又自己加了个类定义.footer。结果显示如下：

demo download

我们看到，这个类.footer的CSS定义是起作用的。

id与类名，哪个更优先？

我们再看看下面的实例。

<style type="text/css">
  #wrap a{color: blue;}
  .footer a{color: red;}
</style>

<div id="wrap">
  <div class="footer">
    <a href="http://www.webkaka.com/">footer - 卡卡网 www.webkaka.com</a>
  </div>
</div>

先有了#wrap的定义，再有.footer的定义。结果显示这样。