如何让 CSS 类优先于 id？

Posted 2023-03-06

【中文标题】如何让 CSS 类优先于 id？

【英文标题】：How do I give a CSS class priority over an id?

【发布时间】：2016-06-10 00:06:39

【问题描述】：

我有一个这样的元素：

#idname
  border: 2px solid black;


.classname
  border: 2px solid gray;

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

我想优先考虑它的 CSS 类而不是它的 CSS id。可能吗？ （换句话说，我想将gray-color 设置为其border）

【参考方案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;

【参考方案2】：

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

一个ID的特异性是100比较高。一个类的特异性是10。

有很多方法可以增加选择器的特异性。

这里有几个方法：

#idname.classname

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

---

div#idname.classname

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

---

div[class="classname"]

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

---

The !important annotation

虽然特殊性适用于选择器，但 !important 注释适用于声明。它具有覆盖所有特异性点的能力。

.classname  ...  !important; 

您可以将!important 视为具有10000 的特异性，如specificity website 所示。虽然从技术上讲!important 不参与特异性。

---

更多信息：

CSS Specificity CSS Specificity: Things You Should Know Relationship between !important and CSS specificity

【参考方案3】：

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

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

考虑this article on specificity

!important 子句虽然确实有效，但在您的级联规则中构建了不灵活，并且以相互竞争的指令结束变得太容易了。

我的基本原则是“一般”避免在 CSS 中使用 IDs，并且仅在需要覆盖现有的类/元素规则时使用它们。

最终，你是作者。将您不太具体的规则写成class，并用ID 覆盖它。

根据我 14 多年的网络构建经验：如果您必须使用 !important 子句，那么您做错了。我觉得很臭。

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

【讨论】：

!important 的特异性不是 10,000（虽然可以这样想）。事实上，!important 完全没有特异性。特异性仅适用于选择器，!important 不是选择器（这是一条规则）。

【参考方案4】：

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

div[id=idname]
   border: 2px solid black;

.classname
   border: 2px solid grey;

我在拖放小游戏中需要它