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

如果您还想定位其他具有 classname 类的元素，而不仅仅是 #idname 则使用:

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