【css】使用!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，而是通过更合理的样式结构和选择器的特异性来解决样式冲突问题。

---

顺便推荐一下我的个人博客：星跳北海的小窝