属性选择器的行为
我试图了解CSS中的通配符选择器如何工作？ 考虑下面的HTML标记：
<div id="child">
</div>
和相应的CSS：
div[id="child"] {border-color: green; }
#child{
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
我认为，div.child的风格是：border：20px solid; 背景：aqua; height：50px; margin：10px; 边框颜色：绿色; 即border-color:green只是添加到div.child的样式表中。 但是，如果我们写
div[id="child"] {border-color: green!important; }
#child{
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
它的作用就像
#child{
border-color: green;
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
问题：为什么我们必须使用div[id="child"] {border-color: green!important; } div[id="child"] {border-color: green!important; }而不是div[id="child"] { border-color: green }来为边框应用绿色？
这是一个特殊问题。 演示这一点的例子。
请参阅以下文档：
6.4.3计算选择者的特异性
计算选择器中ID属性的数量（= b）
统计选择器中其他属性和伪类的数量（= c）
计算选择器中元素名称和伪元素的数量（= d）
因此#child的特异性为100.而div[id="child"]的特异性为11。
!important将有效地覆盖由#child应用的#child 。
或者，您可以使用以下内容，并避免使用!important 。
jsFiddle例子
div#child[id="child"] {
border-color: green;
}
这并不能解释使用!important和不使用它们之间的区别，而是如何在不使用两条规则的情况下应用绿色边框。
如果你看一下border:的文档，你会发现：
Formal syntax: <br-width> || <br-style> || <color>
<color> ：
表示边框颜色的<color> 。 如果未设置，则其默认值为元素的color属性值（文本颜色，而不是背景颜色）。 请参阅边框颜色。
默认color是#000 （黑色）。
所以，通过写作
border: 20px solid;
你基本上是指定：
border-width: 20px
border-style: solid;
border-color: #000;
如果您在该规则之前放置了border-color: green ，它将被覆盖。 所以你可以写：
border: 20px solid;
border-color: green;
要么
border: 20px solid green;
使用两条规则只是为了应用边框颜色是不必要的。
它与选择器的特殊性有关。 当试图应用相互排斥样式的多个选择器之间存在冲突时，特异性是决定哪些样式胜出的度量。
所以你的第一个选择器div[id="child"]是一个属性/类选择器，它比第二个块的Id选择器具有更低的特异性： #child
当您对风格!important ，无论具体如何都适用。 由于这个原因，它也应该谨慎使用。