一、优先级的基本概念
优先级指的是当多个 CSS 规则应用于同一元素时，浏览器如何确定哪些规则具有高优先级，哪些规则具有低优先级。
每个选择器都有一定的优先级，优先级由选择器的组成方式、选择器的权重、选择器的位置决定，权重高的选择器优先级也越高。权重相同的情况下，后定义的规则高于先定义的规则。
在 CSS 层叠中，同一个元素上不同选择器的优先级是通过四个级别（即权重）来进行比较的，这四个级别由以下部分组成：
- 直接在样式属性中指定的样式（例如 style=”font-size:14px”）的权重为 1000。
- ID选择器的权重为 100。
- 类、伪类和属性选择器的权重为 10。
- 元素和伪元素选择器的权重为 1。
请看下面的示例：
p#foo /* ID选择器 + 元素选择器，权重为 101 */ .bar .baz /* 类选择器 + 类选择器，权重为 20 */ div[attr="value"] > a:hover /* 属性选择器 + 元素选择器 + 伪类选择器，权重为 13 */
二、CSS 继承
CSS 继承指的是父元素的某些样式被子元素继承。某些样式（例如背景、字号、字体颜色等）会被子元素自动继承，而某些样式（例如边框、外边距、内边距等）则不会继承。
可以使用 inherit 关键字来明确指定某个属性应该被继承。例如：
p {
color: red;
}
em {
color: inherit; /* em 元素的文字颜色与父元素相同（即为红色） */
}
三、重要性
CSS 规则中可以使用 !important 来强制覆盖其他规则的优先级，这个时候无论是内联样式还是 ID 选择器，都无法超越其优先级。
虽然使用 !important 可以灵活地解决某些布局问题，但它经常被误用，应当谨慎使用。
四、层叠顺序
层叠顺序指的是当多个元素叠放在一起时，浏览器如何决定哪个元素在哪个元素的前面或后面。层叠顺序又称为上下文层叠、z 轴层叠等。
下面是常见的元素的默认层叠顺序（从下到上）：
- 背景和边框（背景色、背景图片、border）
- 块级盒子
- 浮动盒子
- 行内盒子（包括行内块盒子）
- z-index 值为 auto 的定位盒子
- z-index 值为 0 的定位盒子
- z-index 值为整数的定位盒子（越大越靠上）
- z-index 值为负数的定位盒子（越小越靠下）
当元素的层叠顺序相同时，先出现在文档流中的元素会出现在后出现的元素前面。如果一个元素被另一个元素包含，则优先级更高的元素将更接近于用户。
五、总结
了解 CSS 的层叠和优先级原理对于编写高效、优雅的 CSS 代码至关重要。在样式冲突时，通常可以通过设置合适的权重或者使用继承来解决，只有在必要的情况下使用 !important 以及层叠顺序来调整元素之间的叠放关系。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303664.html
微信扫一扫 
支付宝扫一扫 