如何给一个CSS类优先于ID？如何给一个CSS类优先于ID？(How do I give a CSS

我有这样一个元素：

 #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注释

虽然特异性适用于选择的!important注释适用于申报。 它具有覆盖所有特异性分力量。

.classname { ...  !important; }

你能想到的!important是具有10000特异性，如在此说明的特异性网站 。 虽然技术上!important不参与特异性。

---

更多信息：

• CSS特异性
• CSS特异性：事情你应该知道
• ！重要和CSS特殊性的关系

Answer 3:

你是倒退这个问题。 CSS规则有重量的，你应该利用这些规则，以正确的级联样式。

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

考虑这篇文章的特殊性

该!important条款，虽然它肯定工作，建立僵化到您的级联规则，它变得太容易做到与竞争指令结束。

我的基本原则是“一般”避免ID在CSS S，只有当你需要重写现有的类/元素规则中使用它们。

最终，你是作者。 写下您的那么具体规则为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?