属性选择器的行为

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的固体; 背景：水色; height：50px; margin：10px; border-color：green; 也就是说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"]特异性TS将具有11的!important

用法的特异性将有效地覆盖由#child施加的边界。

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

jsFiddle example

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

Answer 2

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

所以，你的第一选择div[id="child"]是一个属性/类选择，它具有较低的特异性比从你的第二块ID选择：#child

当您申请!important于一种风格，它不管施加特异性。由于这个原因，它也应该谨慎使用。

Answer 3

这并不能说明使用!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; 

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