CSS会根据特指性、来源和声明的顺序来解析和应用这些样式表的规则
层叠三大规则
- 样式表来源
- 用户代理模式(浏览器默认样式)
通常指浏览器为HTML元素提供的一组默认的样式,确保在没有CSS的情况下,网页内容仍具有基本可读性和可访问性。
- 用户样式表
用户自定义的样式表,可用于覆盖用户代理样式和作者样式中的某些样式(用户可通过安装扩展或修改浏览器插件自定义用户样式表)。 3. 作者样式表
由网页开发者创建的样式表,可覆盖用户代理样式表和用户样式表,可包含内联样式、嵌入式样式、外部式样式。
- 作者样式表!important
- 用户样式表中的!important
- 用户代理样式表中的!important
- 选择器优先级
- 元素选择器
根据HTML元素类型选择元素。 p 表示选择所有p元素
- id选择器
根据元素的id属性选择特定的元素 #element1 表示选择id为element1的元素
- 属性选择器
根据元素的属性和属性值选择元素
[attribute1] 表示选择具有attribute1属性的所有元素
[attribute1="value"] 表示选择具有attribute属性且值为value的所有元素
- 伪类选择器 根据元素的状态或文档结构选择元素
:hover 表示鼠标悬停位置的元素
:first-child 表示选择属于其父元素的首个子元素
5.伪元素选择器
选择元素的某个部分,如内容的前或后
::before 表示选择元素内容之前的一个虚拟元素
::after 表示选择元素之后的一个虚拟元素
- 组合选择器
后代选择器(空格)、子元素选择器(>)、相邻兄弟选择器(+)、一般兄弟选择器(~)
- 源码位置
根据 CSS 的规则,当有多个相同优先级的选择器存在时,最后出现的选择器将具有更高的优先级(最后声明的生效)。