如何为id提供CSS类优先级？

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

Answer 2

你真正要问的是如何赋予一个比ID 更高的特异性.

ID具有相对较高的特异性100.类具有10的特异性.

有许多方法可以提高选择器的特异性.

以下是一些方法:

#idname.classname

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

div#idname.classname

现在这个选择器的特异性为111(因为一个元素的特异性为1).

div[class="classname"]

此选择器将无法覆盖ID选择器,因为属性选择器的特异性为10,并且选择器的总特异性仅为11.

虽然特异性适用于选择器,但!important注释适用于声明.它有权覆盖所有特异性点.

.classname { ...  !important; }

您可以认为!important具有10000的特异性,如此特异性网站所示.虽然技术上!important不参与特异性.

更多信息:

Answer 3

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

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

该!important条款虽然确实有效，但在您的级联规则中建立了不灵活性，并且很容易以相互竞争的指令结束。

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

最终，你是作者。将不太具体的规则写为 a class，并用ID.

从我 14 年以上的网络构建经验来看：如果您必须使用!important条款，那您就做错了。我觉得它很臭。

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