目录
1.层叠三大规则的优先级
2.分门别类
3.经验之谈
正文
1.层叠三大规则的优先级
样表来源 > 选择器 > 源码
2.分门别类
样式表的优先级重要程度排序(自上而下递减)
- 用户代理样式表中的！important
- 用户样式表中的！important
- 作者样式表中的！important
- 作者样式表
- 用户样式表
- 用户代理样式表（浏览器默认样式）
选择器优先级
- 内联 > id > class = attribute = pseudo-elementclass > type = pseudo-element 内联 > id > class = attribute = pseudo-elementclass > type = pseudo-element （注意：内联样式不是选择器，只是拿出来做对比的哈）
其中，对于选择器布冯也给大家做了一下整理：
基础选择器：
- #id -- ID选择器
- Tagname -- 类型选择器或者标签选择器
- .class -- 类选择器
- *（梅花号） -- 通用选择器（此选择器可以匹配所有元素）
组合器：
- 子组合器（>）： 匹配的目标元素是其他元素的直接后代 如：.parent > .child
- 相邻兄弟组合器（+）: 匹配的目标元素紧跟在其他元素后面 如：p+h2
- 通用兄弟组合器（
）： 匹配所有跟随在指定元素之后的兄弟元素 如：li.activeli - 复合选择器: 多个基础选择器可以连在一起使用 如：h1.page-header
- 属性选择器: 通过约束属性值，div[data-title="aaa"]
- 伪类选择器: 选中处于某个特定状态或者相对于其父级或兄弟元素的位置的元素 如：first-child,:hover
- 伪元素选择器: 匹配在文档里没有直接对应html元素的特定部分，或插入内容。如h2::first-letter,div::before
- 逻辑选择器： 一种较新的选择器 如：：is(): has() :note()
源码顺序
- 对于@import的样式来说，要根据@import放入顺序而定
- 对于link和style标签的样式来说，要根据在document中的顺序而定
3.经验之谈
下面给出三条学习到的经验之谈来尽量规避因优先级儿产生的问题：
- 选择器尽量少用id
- 尽量不要用！important
- 自己的样式加载在引用库样式的后面
