如何让 CSS class 优先于 id？

Question

我有这样一个元素：

#idname{
  border: 2px solid black;
}

.classname{
  border: 2px solid gray;
}

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

我想给它的 CSS class 一个更高的优先级而不是它的 CSS id。可能吗？ （换句话说，我想将 gray-color 设置为 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>

如果您还想使用 class classname 而不仅仅是 #idname 来定位其他元素，那么请使用：

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

Answer 2

您实际上要问的是如何赋予 class 比 ID 更高的 特异性。

一个ID的特异性比较高，为100。一个class的特异性为10。

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

这里有几个方法：

#idname.classname

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

div#idname.classname

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

div[class="classname"]

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

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

.classname { ...  !important; }

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

更多信息：

Answer 3

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

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

!important 子句虽然确实有效，但会在您的级联规则中产生不灵活的情况，并且很容易以竞争指令结束。

我的基本原则是 "generally" 避免 CSS 中的 ID，并且仅在需要覆盖现有 class/element 规则时才使用它们。

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

从我 14 年多的网络建设经验来看：如果你必须使用 !important 子句，那你就错了。我觉得很臭

也就是说有时会发生。你继承了别人的可怕css，这很难避免。

Answer 4

在某些情况下可能有用的其他一些解决方法是使用

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

我在拖放式小游戏中需要它

How do I give a CSS class priority over an id?