CSS选择器的特殊性

在css中，有可能给同一个元素属性定义两次不同的数值。如：

h1 { color: red }

body h1 { color: red }

此时给h1定义了两种颜色，但是h1不可能有两种颜色，以上两种颜色只有一种能匹配h1的颜色。

而哪个颜色将会匹配h1，此时就需要了解css选择器的特殊性。

对于每一个规则，用户代理会计算选择器的特殊性，并将该特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出。

将特殊性的结果比作四位数值。如： 0， 0， 0， 0 ，有以下规则。

(1)，声明中的每个ID属性值，加 0， 1， 0， 0. 如：

.#answer { color: red }   
// 特殊性： 0， 1， 0， 0     answer是一个id

(2)，每个元素和伪元素，加 0， 0， 0， 1 如：

h1 { color: red }   
//特殊性：0， 0， 0， 1        只有一个元素h1
div ul li { color: red }   
//特殊性：0， 0， 0， 3        三个元素（ div, ul, li ）

(3)，每个类属性值，伪类，或属性选择器，加 0， 0， 1， 0 如：

h2.grape { color: red }   
//特殊性：0， 0， 1，1     一个类属性值grape，一个元素h2
input[ type=“text” ]    
//特殊性：0， 0， 1， 1    一个属性选择器type=“text”   一个元素input

(4)，结合符和通配选择器对特殊性贡献为0

* { color: red }      特殊性：0， 0， 0， 0

(5)，继承来的属性没有特殊性，还不如0.

(6)，內联样式声明的属性特殊性第一个数字为1，比其它外部声明的属性的特殊性都高

(7)，带有important的属性特殊性最高.

(8)，相同属性的特殊性相同时，匹配后声明的样式

例1：

p {
    color: red;  //特殊性：0， 0， 0， 1
}

body p {
    color: green;   //特殊性：0， 0， 0， 2   特殊性较高
}

<p>My color: Red Or Green ?</p>

结果为：

例2:

body h1 {
    color: black;   //特殊性：0， 0， 0， 2
}

.test {
    color: gray;    //特殊性：0， 0， 1， 0
}

h1.test {
    color: orange;   //特殊性：0， 0， 1， 1    特殊性最高
}

<h1 class="test">My color: Black Or Gray Or Orange ?</h1>

例3

#test {
    color: red;  特殊性：0， 1， 0， 0     特殊性较高
}

table tr td ul li[id="test"] {
    color: gray;    特殊性：0， 0， 1， 5
}

<table>
            <tr>
                <td>
                    <ul>
                        <li id="test">My Color ?</li>
                    </ul>
                </td>
            </tr>
</table>

例4

#test {
    color: green;    特殊性： 0， 1， 0， 0
}

<p id="test2" style="color: red">My Color is Red</p>
//为内联样式  特殊性高于其它外部样式

CSS选择器的特殊性

猜你喜欢