关闭

CSS选择器优先级

标签: css选择器特殊性
170人阅读 评论(0) 收藏 举报
分类:

先来看个例子,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,任何一条规则都会覆盖继承的属性。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:42244次
    • 积分:641
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:0篇
    • 译文:0篇
    • 评论:7条
    文章分类
    最新评论