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

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

  1. !important:具有最高优先级,用于强制覆盖其它样式。

  2. 内联样式:直接在 HTML 元素的 style 属性中定义的样式,其优先级高于后面提到的其它选择器。

  3. ID 选择器:通过 #id 定义的样式,其优先级高于后面提到的 class 选择器和标签选择器。

  4. 类选择器、属性选择器、伪类选择器:通过 .class、[attribute. 或 :pseudo 定义的样式,其优先级高于后面提到的标签选择器。

  5. 标签选择器、伪元素选择器:通过 tagname 或 ::pseudo 定义的样式,优先级最低。

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