Css中样式的优先级
2021-10-08 本文已影响0人
安北分享
Css中样式的优先级
!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符
!important
例外规则
当在一个样式声明中使用一个 !important
规则时,此声明将覆盖任何其他声明。虽然,从技术上讲,!important
与优先级无关,但它与最终的结果直接相关。使用 !important
是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important
规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
一些经验法则:
-
一定要优先考虑使用样式规则的优先级来解决问题而不是
!important
-
只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important
-
永远不要在你的插件中使用
!important
-
永远不要在全站范围的 CSS 代码中使用
!important
什么的情况下可以使用 !important:
A) 覆盖内联样式
你的网站上有一个设定了全站样式的 CSS 文件,同时你(或是你同事)写了一些很差的内联样式。
全局的CSS文件会在全局范围内设置网站的外观,而直接在各个元素上定义的内联样式可能会覆盖您的全局CSS文件。 内联样式和!important都被认为是非常不好的做法,但是有时你可以在CSS文件里用!important去覆盖内联样式。
在这种情况下,你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。