选择器
选择器类型
id选择器（#myid）
类选择器（.my-classname）
标签选择器（div,h1,p）
后代选择器（h1 p）后代选择器的祖先和后代之间用空格分割
相邻后代选择器（子）选择器（ul>li）
兄弟选择器（li~a）
相邻兄弟选择器（li+a）
属性选择器（a[rel=”external”]）
伪类选择器（a:hover,li:nth-child）
伪元素选择器（::before、 ::after）
通配符选择器（*）
多个选择器指定相同样式，用逗号分割（.class1, .class2 {color: red}）
各种类型选择器中间没有连接符，标签选择器要放在类选择器前面防止歧义（如div.class1，如果写成.class1div就是名为class1div的类选择器）
选择器的匹配
当存在后代选择器时候，CSS选择器的匹配是从右往左的，原因是从左往右匹配的话，需要遍历DOM树，可能会有多次回溯，而从右往左的话，先匹配所有的子节点选择器，然后向上查找，这样性能更好。
由于选择器的匹配需要在整个DOM树中查找节点，层级越高性能越低，因此不建议CSS选择器层级太多。
优先级
引入样式优先级
外部样式 | 内部样式 < 内联样式
外部样式和内部样式，最后出现的优先级最高
声明样式优先级
- 继承不如指定
- :link、:visited、:hover、:active按照LVHA（LoVe HAte）顺序定义
- !important > 内联 > ID > Class|属性|伪类 > 元素选择器
优先级计算方法
对于每条CSS规则，生成一个优先级四元组<内联,ID,Class|属性|伪类,元素选择器>。
每一位的数值计算方法是，在规则中选择器出现的个数。
两条规则之间对比，从左到右对比，数值大的规则优先级高。
如果某一位相同，对比下一位。
如果最终对比结果相同，则靠后的规则的优先级更高。
参考文章
若有收获，就点个赞吧
0 人点赞
