一、优先级的基本概念
优先级指的是当多个 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 以及层叠顺序来调整元素之间的叠放关系。