如何让 CSS 类优先于 id？答案

【问题标题】：How do I give a CSS class priority over an id?如何让 CSS 类优先于 id？
【发布时间】：2016-06-10 00:06:39
【问题描述】：

我有一个这样的元素：

#idname{
  border: 2px solid black;
}

.classname{
  border: 2px solid gray;
}

&lt;div id = "idname" class="classname"&gt;it is a test&lt;/div&gt;

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

【问题讨论】：

【解决方案1】：

不要使用!important，因为这是最糟糕的解决方案，如果你想切换样式，那么就这样做吧。

#idname{
  border: 2px solid black;
}

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

&lt;div id = "idname" class="classname"&gt;it is a test&lt;/div&gt;

如果您还想使用 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。

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

.classname { ...  !important; }

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

更多信息：

【讨论】：

【解决方案3】：

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

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

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

我在拖放小游戏中需要它

【讨论】：