网站地图    收藏   

主页 > 前端 > css教程 >

CSS 优先级和特指度 - html/css语言栏目:html.css -

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] 1、ID 选择符 类选择符 元素选择符,特指度高的优先级高2、行内样式 内嵌样式 链接样式3、设定的样式 继承的样式特指度的计算:特指度可以用一个公式 I-C-E 来计算,其中I 是 I...

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 的优先级高
            }
        }
    }
}

例如:

red

green


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

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

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

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

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



自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论