CSS规则的特殊性计算

1. 海外社媒客户开发工具【免费】了,帮你从GG/FB/Ins/谷歌地图上免费获取客户

2. WhatsApp 聊天记录保险【99元/年】,聊天记录不怕丢。自带翻译、多开,号码抓取、群发

3. 外贸网站搭建、谷歌SEO、社媒运营、企业WhatsApp管理、外贸管理软件、AI应用,【联系我】

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

#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嵌套。

1. 海外社媒客户开发工具【免费】了,帮你从GG/FB/Ins/谷歌地图上免费获取客户

2. WhatsApp 聊天记录保险【99元/年】,聊天记录不怕丢。自带翻译、多开,号码抓取、群发

3. 外贸网站搭建、谷歌SEO、社媒运营、企业WhatsApp管理、外贸管理软件、AI应用,【联系我】

微信扫一扫 或 点击链接联系我

仍有疑问,点击 链接,加个 微信 好友,一起交流。

《CSS规则的特殊性计算》有3条评论

发表评论