关于Css的优先级和层叠的学习总结

文章目录

• 层叠三大规则的优先级

• 分门别类

• 经验之谈

---

正文

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()

源码顺序

1. 对于@import的样式来说，要根据@import放入顺序而定
2. 对于link和style标签的样式来说，要根据在document中的顺序而定

---

3.经验之谈

下面给出三条学习到的经验之谈来尽量规避因优先级儿产生的问题：

1. 选择器尽量少用id
2. 尽量不要用！important
3. 自己的样式加载在引用库样式的后面