如何让 CSS 类优先于 id? [英] How do I give a CSS class priority over an id?

问题描述

我有一个这样的元素:

#idname{边框:2px纯黑色；}.班级名称{边框:2px 纯灰色；}

<div id = "idname" class="classname">这是一个测试</div>

我想优先考虑它的 CSS 类而不是它的 CSS id.是否可以?(换句话说，我想将 gray-color 设置为它的 border)

解决方案

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

#idname{边框:2px纯黑色；}#idname.classname {边框:2px 纯灰色；}

<div id = "idname" class="classname">这是一个测试</div>

如果您还想使用类 classname 而不仅仅是 #idname 来定位其他元素，请使用:

#idname.classname, .classname {边框:2px 纯灰色；}

I have a element like this:

#idname{
  border: 2px solid black;
}

.classname{
  border: 2px solid gray;
}

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

I want to give a bigger priority to its CSS class instead of its CSS id. Is it possible? (In other word I want to set gray-color as its border)

解决方案

Do not use !important because it is the worst solution, if you want to switch the styling then do it that way.

#idname{
  border: 2px solid black;
}

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

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

If you want to target also other elements with the class classname and not only the #idname then use:

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

这篇关于如何让 CSS 类优先于 id?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！