我如何给一个CSS类优先级的ID？

#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）

2016-02-26 Shafizadeh

我不明白你的问题。如果您不想将黑色边框赋予'idname'元素，那么为什么要编写该规则？ – 2016-02-26 17:44:32

@torazaburo'＃idname'块中的所有属性都是当前属性。但有时我需要向名为'.active' *（在本例中名为'.classname'）*的元素添加一个类来更改某些属性。 – Shafizadeh

不要使用!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; 
}

2016-02-26 16:58:34

完美的解决方案..谢谢。 +1 – Shafizadeh

你实际上问的是怎么给一类较高特异性比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不参与特异性。

的更多信息：

2016-02-26 17:06:15

好的解释...谢谢+1 – Shafizadeh

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

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

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

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

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

从我14多年的建设网络的东西：如果你必须使用!important条款，你做错了。我觉得它很臭。

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

2016-02-26 17:07:38 Bosworth99

'！important'的特殊性不是10,000（尽管人们可以这么想）。实际上，“重要”根本就没有特异性。特殊性仅适用于选择器，'！important'不是选择器（这是一条规则）。 –

一点点其他的解决方法解决方案，在某些情况下可以帮助是使用

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

我需要它在一拖&降小游戏

2018-01-26 20:54:14

回答