CSS 优先级和特指度

当前位置 : 首页 > 网页制作 > CSS > CSS 优先级和特指度

CSS 优先级和特指度

来源: 作者: 时间:2016-01-25 10:01
1、ID 选择符 类选择符 元素选择符,特指度高的优先级高2、行内样式 内嵌样式 链接样式3、设定的样式 继承的样式特指度的计算:特指度可以用一个公式 I-C-E 来计算,其中I 是 I

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

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

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


特指度的计算:

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

I 是 ID

C 是 Class

E 是 Element

对于一个 规则,若选择符中有一个 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 的优先级高
            }
        }
    }
}

例如:

red

green


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

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

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

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

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



Tag:
网友评论

<