CSS 优先级

本文最后更新于:2024年3月18日 凌晨

CSS 优先级

  • 在引用样式表的4种方法中,其中,优先级最高的是嵌入样式表的方法,其余3种方法顺序相同,若同时出现,浏览器依然会遵守"最近优先的原则",即与内容最靠近的那个样式表插入方法。

  • 在使用CSS样式过程中,经常会遇到同一个元素由不同选择符定义的情况,这时候就要考虑到选择符的优先级,通常我们使用的选择父包括:id选择符,类选择符,包含选择符和HTML标签选择符等,因为id选择符是最后被加到元素上的,所以优先级最高,其次是类选择符,!important语法主要用来提升样式规则的应用优先级。

!important

浏览器就会优先选择它声明的样式表来显示,所以若想打破一个定义的优先级顺序,可以使用!important声明。

1
2
3
p{color: red !important;}
.blue{color: red}
#id{color: green}

上例中同时对页面的一个段落加上这三个样式,最后段落依然被!important声明的。
HTML标签选择符样式为红色字体显示,如果去掉!important,则会依照优先级最高。的id选择符为绿色字体显示。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!