根据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是不支持那个伪元素选择符，求各位大神给小弟解析一下，多谢。
   |
