您的位置：首页 > Web前端 > CSS

求高手解释关于CSS特殊性算法的问题

2012-02-25 13:06 351 查看

根据W3C上面的官方算法。
特殊性的值可以看作是一个由四个数组成的一个组合，用 a，b，c，d 来表示它的四个位置。

依次比较 a，b，c，d 这个四个数比较其特殊性的大小。比如，a 值相同，那么 b 值大的组合特殊性会较大，以此类推。

a，b，c，d 值的确定规则：

①如果HTML标签的’style’属性中该样式存在，则记a为1

②数一下选择器中ID选择器的个数作为b的值

③其他属性以及伪类的总数量是c的值

④元素名和伪元素的数量是d的值。

前两天面试的时候，我也就照这个区说了，但是面试我的那个高手说在实际情况中不一定是这样的，所以我这两天就测试了一下，果然高手就是高手，在实际的情况中
的表现的确不是这个算法所说的那样。

<head>

<title>

Specificity

</title>

<style type="text/css" rel="stylesheet">

li{list-style:none;}

*{color:red;} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li{color:black;}/* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

ul:first-line{color:yellow;}/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ /*这个有问题*/

ul #testLi{color:orange;}/* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */

ul li{color:green;}/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

#test ul li{color:black;}/* a=0 b=1 c=0 d=2 -> specificity = 0,1,0,2 */

.wrapper li{color:blue;}/* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

</style>

</head>

<body>

<div class="wrapper" id="test">

<ul>

<li id="testLi">one</li>

<li>two</li>

<li>three</li>

<li>five</li>

</ul>

</div>

</body>

复制代码
上面的表现，依照那个算法第一个li的字体颜色应该是黑色的，但是在chrome，IE8,9中第一个li都为黄色的，也就是说：first-line的优先级更高，我又测试了其他的伪类和伪元素，发现，只要有伪元素，那么这个选择器对应特殊性最高。如果是伪类，那么就刚好符合对应的算法。在Firefox和IE6中都为黑色，IE6是不支持那个伪元素选择符，求各位大神给小弟解析一下，多谢。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航