一直觉得自己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规则，那么就证实了我的猜想。
<!DOCTYPE html>欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）