Behavior of attribute selector

I'm trying to understand how wildcard selector in css does work? Consider the following HTML markup:

<div id="child">
</div>

and corresponding CSS:

div[id="child"] {border-color: green; }
#child{
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

I think, that style of div.child will be: border: 20px solid; background: aqua; height: 50px; margin: 10px; border-color:green; Ie border-color:green just adde to a stylesheet of div.child . But if we write

div[id="child"] {border-color: green!important; }
#child{
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

It works like

#child{
    border-color: green;
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

Question: Why we must using div[id="child"] {border-color: green!important; } div[id="child"] {border-color: green!important; } rather than div[id="child"] { border-color: green } for applying green color for border?

---

It's an issue of specificity. Example demonstrating this.

Refer to the following documentation:

6.4.3 Calculating a selector's specificity

count the number of ID attributes in the selector (= b)

count the number of other attributes and pseudo-classes in the selector (= c)

count the number of element names and pseudo-elements in the selector (= d)

Therefore #child has a specificity of 100. And div[id="child"] would have a specificity of 11.

Usage of !important would effectively override the border applied by #child .

Alternatively, you could use the following, and avoid using !important .

jsFiddle example

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

---

This doesn't explain the difference between using !important and not using it, but rather how to apply the green border without using two rules.

---

If you look at the documentation for border: , you will find this:

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

<color> :
A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color). See border-color.

The default color is #000 (black).

So, by writing

border: 20px solid;

you are basically specifying:

border-width: 20px
border-style: solid;
border-color: #000;

And if you put border-color: green before that rule, it will be overwritten. So you could either write:

border: 20px solid;
border-color: green;

or

border: 20px solid green;

Using two rules just to apply the border color is unnecessary.

---

It has to do with the specificity of your selector. When there is a conflict between multiple selectors which are trying to apply mutually exclusice styles, specificity is the measure that determines which styles win out.

So your first selector div[id="child"] is an attribute/class selector, which has lower specificity than the Id selector from your second block: #child

When you apply !important to a style, it is applied irrespective of specificity. It should also be used sparingly for that reason.

链接地址: http://www.djcxy.com/p/15390.html

上一篇: RGB到Hex和Hex到RGB

下一篇: 属性选择器的行为