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 - 颜色设为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的特异性，如此specificity website所示。虽然技术上!important没有参与特异性。

更多信息：

Answer 3

你正在倒退这个。 CSS规则很重要，您应该利用这些规则来正确地级联样式。

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

!important子句虽然确实有效，但却会在你的级联规则中建立不灵活性，并且最终很难以竞争指令结束。

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

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

从我14年多来构建Web内容：如果必须使用!important子句，那么你做错了。我认为它非常臭。

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

Answer 4

在某些情况下可以提供帮助的其他解决方案是使用

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

我需要一个拖放小游戏