技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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。而我想在内层.footerdiv把链接颜色设置为red。但代码执行结果不在预期,显示如下:

 

demodownload

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

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

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

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

 

demodownload

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

CSS定义可以用标签,例如pdivspan等,也可以用类名,例如.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。结果显示如下:

 

demodownload

我们看到,这个类.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的定义。结果显示这样。

 

demodownload

可以看到,针对id的CSS定义#wrap,是优先于使用类名的CSS定义.footer的。

总结

通过本文几个实例的分析,对CSS定义的继承与优先应该有了一定的了解,就是越具体越优先,并且遵循如下规则:id选择器 > 类选择器 > 标签选择器

相关文章

x
x
  • 站长推荐