如何赋予 CSS 类优先于 id 的优先级？

Question

我有一个这样的元素：

#idname{
  border: 2px solid black;
}

.classname{
  border: 2px solid gray;
}

<div id = "idname" class="classname">it is a test</div>

我想给予它的 CSS 类更大的优先级，而不是它的 CSS id。是否可以？ （换句话说，我想将

gray

颜色设置为其

border

）

Answer 1

不要使用

!important

，因为这是最糟糕的解决方案，如果你想切换样式那就这样做。

#idname{
  border: 2px solid black;
}

#idname.classname {
  border: 2px solid gray;
}

<div id = "idname" class="classname">it is a test</div>

如果您还想定位具有

classname

类的其他元素，而不仅仅是

#idname

，则使用：

#idname.classname, .classname {
  border: 2px solid gray;
}

Answer 2

您实际上要问的是如何为班级提供比 ID 更高的特异性。

ID 的特异性较高，为 100。类的特异性为 10。

有很多方法可以提高选择器的特异性。

这里有一些方法：

#idname.classname

现在这个选择器的特异性为 110。

---

div#idname.classname

现在这个选择器的特异性为 111（因为元素的特异性为 1）。

---

div[class="classname"]

此选择器将无法覆盖 ID 选择器，因为属性选择器的特异性为 10，而选择器的总特异性仅为 11。

---

!important

注释

虽然特异性适用于选择器，但

!important

注释适用于声明。它有能力覆盖所有特异性点。

.classname { ...  !important; }

您可以将

!important

视为具有 10000 的特异性，如本 特异性网站 中所示。虽然从技术上讲

!important

不参与特异性。

---

更多信息：

• CSS 特异性
• CSS 特异性：你应该知道的事情
• !important 和 CSS 特异性之间的关系

Answer 3

你正在倒退。 CSS 规则具有权重，您应该利用这些规则来正确级联样式。

element = 1 pt
class = 10 pt
id = 100 pt
inline = 1000 pt
!important = 10,000 pt

考虑这篇关于特异性的文章

!important

子句虽然确实有效，但却给你的级联规则带来了不灵活性，并且很容易最终导致相互竞争的指令。

我的基本原则是“一般”避免 CSS 中的

ID

，并且仅在需要覆盖现有类/元素规则时才使用它们。

最终，你就是作者。将不太具体的规则写为

class

，并用

ID

覆盖它。

从我 14 多年构建网络的经验来看：如果你必须使用

!important

子句，那么你就做错了。我觉得很臭。

这就是说有时会发生这种情况。你继承了别人糟糕的CSS，这是很难避免的。

Answer 4

这是一个有点老的问题，并且已经有很好的答案了。

但是，如果您能够合理修改相关 ID 的 CSS 选择器，您可能会对

:where()

CSS 伪类函数感兴趣： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_where_exception

假设您有以下 HTML：

...
<section id="some-id">
  <p>I am feeling blue</p>
</section>
...

您目前有这个，但希望在您的部分中有蓝色段落：

#some-id {
  color: red;
}

p {
  color: blue;
}

要使用蓝色段落，您可以将其更改为：

:where(#some-id) {
  color: red;
}

p {
  color: blue;
}

在某些方面，这可以实现

!important

标签的相反效果，尽管它们是完全不同类型的 CSS 功能。

Answer 5

在某些情况下可能有帮助的其他解决方案是使用

div[id=idname] {
   border: 2px solid black;
}
.classname{
   border: 2px solid grey;
}

我在拖放小游戏中需要它