样式优先级的规则是什么？

Question

在 CSS 中，当多个选择器应用于同一个元素并设置了相同的属性时，就会出现样式冲突的问题。此时，CSS 会根据一定的规则来决定哪个样式具有更高的优先级，从而确定最终的样式效果。CSS 样式优先级的规则如下：

1. !important：具有最高优先级，用于强制覆盖其它样式。
2. 内联样式：直接在 HTML 元素的 style 属性中定义的样式，其优先级高于后面提到的其它选择器。
3. ID 选择器：通过 #id 定义的样式，其优先级高于后面提到的 class 选择器和标签选择器。
4. 类选择器、属性选择器、伪类选择器：通过 .class、[attribute. 或 :pseudo 定义的样式，其优先级高于后面提到的标签选择器。
5. 标签选择器、伪元素选择器：通过 tagname 或 ::pseudo 定义的样式，优先级最低。

需要注意的是，当出现多个选择器具有相同的优先级时，CSS 会按照样式表中出现的顺序来决定样式的优先级，越后出现的样式会覆盖前面出现的样式。此外，继承自父元素的样式的优先级比上述任何选择器都低。