如何让 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 ）

原文由 Shafizadeh 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

原文由 t.niese 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 specificity 之间的关系

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议