一直觉得自己CSS很搓很搓很搓~~~， 入职后决心要加强，以前学CSS都是看比较实践的书籍，如《精通CSS》这些，大多是技巧，靠记忆~~ 发现这样学来实在是根基不牢，永远都要跟着别人后头走。 个人觉得要在某个领域中强大，基础原理是必不可少的，于是有了本人第一篇CSS学习的文章，文章主要是根据《CSS权威指南》来对自己的一些不牢靠的知识进行记录巩固，发现对这本书真是相见恨晚，以前学CSS太浮躁了，地基没打好唉~~废话不多说了，进入正题吧~ 

在选择器上，主要是一些特殊性和层叠顺序规则需要熟悉。

 

选择器的特殊性：

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0,0,0,0。一个选择器的具体特殊性如下确定：

  • ID属性值，加 0, 1, 0, 0。
  • 类属性值、属性选择或伪类，加 0, 0, 1, 0。
  • 元素和伪元素， 加 0, 0, 0, 1。

结合符和通配符对特殊性没有任何贡献（即便无贡献，但和继承值还有浏览器默认样式相比，优先级还是结合符或通配符高）一般第一个0是为内联样式保留的。

 

层叠规则：

按以下步骤顺序确定层叠规则：

  • 找出匹配元素的规则
  • 按显示权重对匹配元素所有声明排序，!important规则权重高于没有!important的规则；
  • 按来源对声明排序，包括3种来源：创作人员、读者和用户代理。创作人员样式胜过读者样式。有!important标识的读者样式要强于所有其他样式，这包括有!important标识的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
  • 按特殊性对声明排序，较高特殊性胜出。
  • 按顺序对声明排序，排在后的生出。

 

一个坑

好吧，先来个例子： .test p span{color:red}; 特殊行为: 0, 1, 2, 0。  

这次终于好不容易发挥了我一次研究生的钻研精神，我就想了，这底层估摸是按位来实现的吧？这样就只需1个数字就可以表示了。

有了猜测就要去论证，如何论证？ 发挥我无耻的结论导向证明的精神，假设浏览器用1个数字按位表示特殊性，那么每一类别的特殊性肯定都是有上限的，正常情况下应该不会太大，于是有了下面的代码来证明：

 

基本思路：

给一个id为test的div元素添加样式规则，同时给这个元素添加一定数量的class，再将这些class结合给出另一个规则，如果到达一定数量的class规则覆盖了id规则，那么就证实了我的猜想。 

 
     
     
          
  1. <!DOCTYPE html> 
    2.  
          
  2. <html> 
    3.  
          
  3. <head> 
    4.  
          
  4. <meta charset="utf-8" /> 
    5.  
          
  5. <title>Selector Demo</title> 
    6.  
          
  6. <meta  name =" copyright "  content =" http://www.hualai.net.cn " /> 
    7.  
          
  7. <style> 
    8.  
          
  8. #test { 
    9.  
          
  9. color: red; 
    10.  
          
  10. } 
    11.  
          
  11. </style> 
    12.  
          
  12. </head> 
    13.  
          
  13. <body> 
    14.  
          
  14. <div id="test"> 
    15.  
          
  15. 这是一个div，id为test 
    16.  
          
  16. </div> 
    17.  
          
  17. 类添加次数： 
    18.  
          
  18. <input type="text" id="count" /> 
    19.  
          
  19. <input type="button" id="add" value="添加" /> 
    20.  
          
  20. <script> 
    21.  
          
  21. document.getElementById('add').onclick = function() { 
    22.  
          
  22. var t = document.getElementById('test'); 
    23.  
          
  23. var count = Number(document.getElementById('count').value); 
    24.  
          
  24. var cls = ''; 
    25.  
          
  25. var css = ''; 
    26.  
          
  26. //加它个count个类,同时拼接CSS字符串 
    27.  
          
  27. for (var i = 0; i < count; ++i) { 
    28.  
          
  28. cls += 't' + i + ' '; 
    29.  
          
  29. css += '.t' + i; 
    30.  
          
  30. } 
    31.  
          
  31. css += '{color: blue;}' 
    32.  
          
  32. t.className = cls; 
    33.  
          
  33. //插入规则 
    34.  
          
  34. loadStyleString(css); 
    35.  
          
  35. }; 
    36.  
          
  36.   
    37.  
          
  37. //插入一条css新规则 
    38.  
          
  38. var loadStyleString = function(css) { 
    39.  
          
  39. var style = document.createElement('style'); 
    40.  
          
  40. style.type = "text/css"; 
    41.  
          
  41. try { 
    42.  
          
  42. style.appendChild(document.createTextNode(css)); 
    43.  
          
  43. } catch(e) {//IE 
    44.  
          
  44. style.styleSheet.cssText = css; 
    45.  
          
  45. } 
    46.  
          
  46. document.getElementsByTagName('head')[0].appendChild(style); 
    47.  
          
  47. } 
    48.  
          
  48.   
    49.  
          
  49. </script> 
    50.  
          
  50. </body> 
    51.  
          
  51. </html> 
    52.  
         
 
     
在输入框中输入要添加的类次数，JS代码会按照次数给div元素添加对应次数的类，同时会插入一条对应的规则，在代码中，id规则为#test{color:red}，而类规则为{color:blue}，所以如果结论正确，那么div的字体颜色会变为蓝色。
 
     
通过本屌丝推测性的不懈努力的测试，发现255是个分水岭，超过255次时，也就是2的8次方，二进制11111111，在chrome下div的文字颜色变成了蓝色，也就是添加的类为256次时，特殊性变成了1,0,0,0，与ID属性特殊性持平，由于规则在后，故而胜出。
 
     
为了保持完整性，以下在各大浏览器进行了测试：
 
     
FF13， chrome22， IE9（包括在其环境下的IE7/8模式），safira5 下，256个类带来的特殊性都等于1个id的特殊性，然而在opera12，IE9下的怪异模式以及IETester下的IE6/7中，均不会超过id的特殊性，推测为分别用数字保存，而不是用一个数字按位存储。