属性选择器的行为

Question

我试图了解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的风格将是：         边框：20px固体;         背景：浅绿色;         身高：50px;         保证金：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 }为边框应用绿色？

Answer 1

这是一个特异性问题。 Example demonstrating this.

请参阅以下文档：

  

<强> 6.4.3 Calculating a selector's specificity

     

计算选择器中的ID属性数量（= b）

     

计算选择器中其他属性和伪类的数量（= c）

     

计算选择器中元素名称和伪元素的数量（= d）

因此#child的特异性为100.而div[id="child"]的特异性为11。

!important的使用会有效地覆盖#child应用的边框。

或者，您可以使用以下内容，并避免使用!important。

jsFiddle example

div#child[id="child"] {
    border-color: green;
}

Answer 2

这并不能解释使用!important和不使用它之间的区别，而是如何在不使用两个规则的情况下应用绿色边框。

---

如果查看border:的文档，您会发现：

  

Formal syntax: <br-width> || <br-style> || <color>

     

<color>：
  表示边框颜色的<color>。如果未设置，则其默认值为元素的color属性的值（文本颜色，而不是背景颜色）。请参阅border-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;

不需要使用两个规则来应用边框颜色。

Answer 3

它与选择器的特异性有关。当多个选择器之间存在冲突，试图应用相互排斥的样式时，特异性是决定哪种样式胜出的度量。

所以你的第一个选择器div[id="child"]是一个属性/类选择器，它的特异性低于第二个块中的Id选择器：#child

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