CSS 优先级和特指度

浏览数：30 / 时间：2015年06月09日

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

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

CSS 优先级和特指度,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS 优先级和特指度