joyfixing的博客

行百里者半九十

CSS选择器优先级

先来看个例子,html部分:

<ul id="nav">
    <li>
        <strong id="benz" class="title">奔驰</strong>
        <ol>
            <li>C级</li>
            <li>E级</li>
        </ol>
    </li>
</ul>

CSS部分:

#nav #benz {
    color: red;
}
#nav .title {
    color: green;
}

那么你认为奔驰会是什么颜色呢?答案是红色,为什么呢?解答这个问题需要了解CSS选择器的优先级了。

选择器的特殊性分成4个成分等级:a,b,c,d。

  • 如果样式是行内样式,那么a=1。
  • b等于ID选择器的总数
  • c等于类、伪类和属性选择器的数量
  • d等于类型选择器和伪元素选择器的数量

此时选择器#nav #benz的特殊性为0,2,0,0,也就是200,而#nav .title的特殊性为0,1,1,0,也就是110,200>110,所以#nav #benz的优先级比#nav .title高。

总结下:用style属性编写的行内样式优先级最高,其次是ID选择器,再次是类选择器,最后就是类型选择器,如果两个选择器的优先级一样,后定义的规则优先。

再看个例子,html部分不变,只修改CSS代码

#nav >strong {
    color: red;
}
#nav strong {
    color: green;
}

此时奔驰的颜色为绿色,那是因为这两个选择器的特殊性相同,都是101,所以后定义的规则优先。

虽然行内样式优先级最高,但也没有标有!important的规则优先级高,比如给类title添加一个带有!important标记的规则。

.title {
     color: yellow !important;
 }

此时奔驰的颜色为黄色。

温馨提示:所有继承的属性特殊性都为0,任何一条规则都会覆盖继承的属性。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/joyfixing/article/details/52766779
文章标签: css 选择器 特殊性
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

CSS选择器优先级

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭