问属性选择器的行为

EN

这是一个具体性的问题。举例说明了这一点。

请参阅下列文件：

6.4.3计算选择器的特异性 计数选择器中的ID属性数(= b) 计数选择器中其他属性和伪类的数量(= c) 计算选择器中元素名和伪元素的数量(= d)

因此，#child具有100的特异性。div[id="child"]的特异性为11。

使用!important将有效地覆盖#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;

只使用两个规则来应用边框颜色是不必要的。

这与你选择者的特殊性有关。当多个选择器之间发生冲突时，它们试图相互应用exclusice样式，而专用性是决定哪种风格获胜的标准。

因此，您的第一个选择器div[id="child"]是一个属性/类选择器，它的特异性低于来自第二个块的Id选择器：#child

当您将!important应用于样式时，无论其特殊性如何，都会应用它。出于这一原因，也应谨慎使用它。