CSS优先级，选择器优化

选择器

• id选择器（#id）
• 类选择器（.classname）
• 标签选择器（a,h1,p...）
• 相邻选择器（e1+e2）
• 子选择器（e1 > e2）
• 兄弟选择器(e1~e2)
• 后代选择器（e1 e2）
• 通配符选择器（*）
• 属性选择器（e[class="list"]）
• 伪类选择器（e:hover,e:nth-child）
• 伪元素选择器（e::after,e::befor）
  

  ---

优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

---

选择器优化

• 避免普遍规则（类似s1 s2 > s3或许s1 .class1 #id1）
• 不要在ID选择器前加标签名或类名(类似a#id1)
• 不要在类名选择器前加标签名(类似div.class1)
• 尽可能使用具体的类别
• 避免使用后代选择器
• 标签分类规则中不应该包含一个子选择器
• 子选择器的问题
• 借助相关继承关系

本文参考 https://www.w3cplus.com/css/css-selector-performance