CSS层叠规则

141 阅读2分钟

CSS会根据特指性、来源和声明的顺序来解析和应用这些样式表的规则

层叠三大规则
  • 样式表来源
  1. 用户代理模式(浏览器默认样式)

通常指浏览器为HTML元素提供的一组默认的样式,确保在没有CSS的情况下,网页内容仍具有基本可读性和可访问性。

  1. 用户样式表

用户自定义的样式表,可用于覆盖用户代理样式和作者样式中的某些样式(用户可通过安装扩展或修改浏览器插件自定义用户样式表)。 3. 作者样式表

由网页开发者创建的样式表,可覆盖用户代理样式表和用户样式表,可包含内联样式、嵌入式样式、外部式样式。

  1. 作者样式表!important
  2. 用户样式表中的!important
  3. 用户代理样式表中的!important
  • 选择器优先级
  1. 元素选择器

根据HTML元素类型选择元素。 p 表示选择所有p元素

  1. id选择器

根据元素的id属性选择特定的元素 #element1 表示选择id为element1的元素

  1. 属性选择器

根据元素的属性和属性值选择元素

[attribute1] 表示选择具有attribute1属性的所有元素

[attribute1="value"] 表示选择具有attribute属性且值为value的所有元素

  1. 伪类选择器 根据元素的状态或文档结构选择元素

:hover 表示鼠标悬停位置的元素

:first-child 表示选择属于其父元素的首个子元素

5.伪元素选择器

选择元素的某个部分,如内容的前或后

::before 表示选择元素内容之前的一个虚拟元素

::after 表示选择元素之后的一个虚拟元素

  1. 组合选择器

后代选择器(空格)、子元素选择器(>)、相邻兄弟选择器(+)、一般兄弟选择器(~)

  • 源码位置

根据 CSS 的规则,当有多个相同优先级的选择器存在时,最后出现的选择器将具有更高的优先级(最后声明的生效)。