首页 >> 网站技术 >> CSS规则的特殊性计算

CSS规则的特殊性计算

Catagory:网站技术, Date:2010年11月23日,Author: 工业品营销-贾定强

今天在写网站的时候发现一个很奇怪的现象,大概情况是这样的

#head #logo #logoleft {…color:#fff;…}

#logoleft ul {…}

#logoleft ul li {…color:#000;…}

我定义的div的顺序依次是head, logo, logoleft,然后在logoleft里面有ul和li。我有个不太好的书写CSS的习惯,我喜欢用id,而不是class,而且id喜欢像上面例子中一样一层套一层,这样看起来有条理,容易维护。遇到特别深的div嵌套时,我就会省略前面的几层,如上面,我会省掉#head #logo。这样一直用的很好,但今天遇到了一个问题,让我觉得这样写css其实并不好。

也许有经验的读者已经发现问题的所在了,li中的color定义是不起作用的。我希望在logoleft中定义一个这个div以及它的子类都继承的color,但又想对里面的li单独进行color的定义。但结果是li中的color是不起作用的。

为什么会出现这种情况呢?原因就在于CSS规则的特殊性计算上

CSS在解析的时候,首先会计算CSS规则的特殊性。先给各个选择器分配一个数字值代表其特殊性,将规则的各个选择器的值加起来就是规则的特殊性。为了保证非常特殊的选择器(如ID)不会被大量的一般选择器(如Class)覆盖掉,CSS赋予了特殊的选择器(如ID)比一般选择器(如Class)要高的多的值,如相差10倍。基本上能够达到的效果就是,用style属性编写的规则总是比其他任何规则特殊;具有ID的规则比没有ID的规则特殊;具有类选择器class的比没有类选择器的规则特殊。如果两个规则的特殊性一样,后面覆盖前面的。

在上面的例子中,第一行的css由三个id组成,其特殊性远高于第三行的一个id定义的css,所以使得第三行的css失效。要想让第三行的css起效果,改正的方法很简单,只要在前面加上省略的父类id就可以了,#head #logo #logoleft ul li {…color:#000;…}。

如果你遇到了似乎没有起作用的css时,很可能是出现了跟我一样的问题——css规则特殊性冲突。你可以在你的选择器中加入它的父类的id来增加它的特殊性。当然,如果你的id嵌套太多的话,为了保证特殊性不冲突,会让你的css代码无畏的增加很多没有的开销,所以,我现在认识到了我自己写css的习惯并不好。建议大家多用class,少用id。因为class中定义的属性特殊性不高,很容易被覆盖或修改,而要覆盖id中的属性,则需要增加很多id嵌套。 александр лобановский биографияпаркет

来源:工业品营销,原文地址:http://www.jiadingqiang.com/1685.html,欢迎分享本文,转载请保留出处!

Comments: 3 Responses to “ CSS规则的特殊性计算 ”
十一月 24th, 2010
成都SEO 说 Said:

成都SEO表示很关注你的博客,不知可否交换友情链接?

[回复]

小强 回复:

暂时不想换链接了

[回复]

十一月 23rd, 2010
手机监听器 说 Said:

谢谢分享了

[回复]

你也来说几句:

名字*必填
邮箱*必填,不会被公开
网站
QQ群交流
最近文章
文章归档
  • 2017 (3)
  • 2016 (30)
  • 2015 (63)
  • 2014 (21)
  • 2013 (38)
  • 2012 (25)
  • 2011 (67)
  • 2010 (268)
  • 2009 (19)