使用!important提升选择器的优先级

背景

昨天我的个人博客备案通过了嘛,然后我就想着完善页面底部的备案信息,参考Argon主题博客美化网站底部信息

但是我想要把icp备案和公安联网备案的信息分开,即 subject-value-value 的结构,
因为 value 的选择器里面写的是右圆角,导致了两个value之间衔接不流畅

我想要取消中间的圆角,于是我新增了一个选择器想要覆盖掉圆角,可是却没有生效。
检查发现原来css是通过后代代选择器找到的value,而后代选择器的特异性要高于类选择器,优先级更高,所以我直接添加的类选择器没有生效。

通过查找资料,我知道了可以用!important来提高样式的优先级,这样就可以覆盖掉原本的圆角了

!important 的作用

!important 的主要作用是强制覆盖其他普通的样式声明。当一个样式属性被标记为 !important 时,它的优先级会高于没有使用 !important 的同名样式属性。

例如,假设我们有以下两个样式规则:

p {
  color: red;
}

p {
  color: blue!important;
}

在这种情况下,段落的文字颜色将是蓝色,因为带有 !important 的样式声明具有更高的优先级。

何时使用 !important

  1. 全局样式覆盖

    在某些情况下,可能需要为整个网站设置一个全局的样式规则,以确保某些关键元素的样式始终保持一致,不受特定页面或组件的局部样式影响。

    比如,为了确保所有链接在任何页面都显示为特定的颜色,可以使用:

    a {
    color: green!important;
    }
  2. 第三方库样式修正

    当使用第三方库时,有时其自带的样式可能不符合我们的设计需求。在这种情况下,可以使用 !important 来覆盖这些库中的样式。

  3. 还有就是像我一样的情况,需要定制某些样式时,可以使用 !important 来覆盖原本的样式

在大多数情况下,应该尽量避免使用 !important,而是通过更合理的样式结构和选择器的特异性来解决样式冲突问题。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇