日期:2014-05-16  浏览次数:20700 次

CSS 优先级和特指度

1、ID 选择符 > 类选择符 > 元素选择符,特指度高的优先级高

2、行内样式 > 内嵌样式 > 链接样式

3、设定的样式 > 继承的样式


特指度的计算:

特指度可以用一个公式 I-C-E 来计算,其中

I 是 ID

C 是 Class

E 是 Element

对于一个 CSS 规则,若选择符中有一个 id,则 I 的值 +1;若选择符中有一个 class ,则 C 的值 +1;若选择符中有一个 element,则 E 的值 +1。

最后,从 I 的值开始比较,比较的规则如下伪代码所示:

if(a.I > b.I){
    a 的优先级高
}
else if(a.I < b.I){
    b 的优先级高
}
else{
    if(a.C > b.C){
        a 的优先级高
    }
    else if(a.C < b.C){
        b 的优先级高
    }
    else{
        if(a.E > b.E){
            a 的优先级高
        }
        else if(a.E < b.E){
            b 的优先级高
        }
        else{
            if(a 先于 b 出现){
                b 的优先级高
            }
            else{
                a 的优先级高
            }
        }
    }
}

例如:

<div id="redText">
    <p>red</p>
    <p id="greenText">green</p>
</div>

<style>
    #redText p{
        color: red;
    }
    #greenText{
        color: green;
    }
</style>

如上例子所示,虽然 greenText 的设置是在后面,但并没有覆盖前面的样式,最后的结果是两个文本都是红色的

我们计算一下两个样式的特指度:

1、#redText p     这个选择符中出现了一次 ID 和一次 Element,所以特指度是 1-0-1

2、#greenText      这个选择符中只出现了一次 ID,所以特指度是 1-0-0

所以第一个的优先级高,不会被后者覆盖