基础知识

• 层叠规则
• 盒模型
• 继承
• 值和单位

CSS的全称是Cascading Style Sheets，也是层叠样式表。
样式表就是规则声明的集合，在集合中会不避免的产生规则的冲突，层叠就是解决规则产生冲突的规则

层叠规则

层叠分为了三大规则

• 样式表来源
• 选择器优先级
• 源码位置

这里演示表来源的重要排序是 样式表来源 > 选择器优先级 > 源码位置

样式表来源

样式表来源这里也有重要排序，其重要排序是

用户代理样式 > 用户样式表 > 作者样式表

但是如果其中含有!important，那么这个顺序就会反过来

作者样式表中的!important > 用户样式表中的!important > 用户代理样式中的!important

选择器优先级

首先，了解选择器优先级，那么我们就需要先知道选择器到底有哪些了

• 基础选择器

    #id -- ID选择器
    Tagname -- 类型选择器或者标签选择器
    .class -- 类选择器
    * -- 通用选择器
  

• 组合器

  • 子组合器(>)
  • 相邻兄弟组合器 (+)
  • 通用兄弟组合器 (~)

• 复合选择器

    多个基础选择器可以连起来用，如：h1.page-header
    
  

• 属性选择器

    通过约束值,div[data-title="aaa"]
  

• 伪类选择器

    单个冒号的 :
    如 :first-child,:hover 
  

• 伪元素选择器

    两个冒号的 ::
    如 h2::first-letter,div::before
  

• 逻辑选择器

    较新的选择器
    :is(),:has(),:where(),:not()
  

选择器的优先级为：
内联 > id > class = attribute = pseudo-class >type = pseudo-element
pseudo-class是伪类选择器
pseudo-element是伪元素选择器

这里内联不属于选择器，只是为了方便比较 :is(),:not(),:has()本身不计入优先级，以参数中最高的优先级为准，:where优先级为0

由于这些选择器都属于较新的选择器，想要了解一下这几个选择器的用法可以翻阅
CSS 新选择器 :is() :where() :has()

源码位置

1.对于@import的样式，根据@import的顺序 2.对于link和style标签的样式，根据在document中的顺序决定 谁最后声明的谁生效

重点

由于层叠概念的原因，我们在编写CSS样式时要拥有好的编码习惯

• 选择器尽量少用id

    1.id选择器具有高特异性，这意味着它的优先级非常高，可能会覆盖其他选择器的样式。
    当使用多个id选择器时，可能会使CSS样式表变得难以管理和维护。如果必须使用id选择器，请尽量限制其使用范围，以最大程度地减少其影响范围。
    
    2.使用id选择器可能会导致HTML和CSS代码之间的紧密耦合。
    如果在HTML标记中频繁使用id属性，那么在更改HTML结构时可能需要同时更改CSS代码。这使得代码更难重构和维护。
    
  

• 尽量不要用!important

   CSS中的!important规则指定了一个样式的优先级，它会覆盖其他具有较低优先级的样式。
   虽然在某些情况下使用!important可以解决样式冲突问题，但是过度使用!important可能会导致代码难以维护和理解，因此建议尽量避免使用。
   
  

• 自己的样式加载在引用库样式的后面

    如果自己的样式文件位于引用库样式文件的前面，那么库样式文件中的样式将具有更高的优先级，并且可能会覆盖自己的样式。
    因此，为了确保自己的样式具有正确的优先级并且可以正确地覆盖库样式文件中的相同样式，自己的样式应该加载在库样式文件的后面。