CSS选择器优先级
来源:互联网 发布:linux snmp v3测试 编辑:程序博客网 时间:2024/06/05 20:11
先来看个例子,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
- css选择器&选择器的优先级
- CSS选择器的优先级
- CSS选择器笔记-优先级
- css选择器优先级
- CSS 选择器优先级
- CSS选择器优先级问题
- css选择器优先级
- CSS选择器及优先级
- css选择器优先级
- CSS选择器及优先级
- css选择器优先级判定
- CSS选择器优先级
- css选择器优先级
- css样式选择器优先级
- CSS选择器的优先级
- CSS 选择器的优先级
- css选择器优先级
- CSS选择器优先级
- selenium webdriver获取不到标签文本及将html特殊符号&转换为正常字符的方法
- DeeoID:Deep learning face representation from predicting 10,000 classes
- 如何在含有checkbox的listview条目中获取到选中的条目信息
- 排序算法之冒泡排序(递归版与非递归版)
- static静态变量的理解
- CSS选择器优先级
- 数据库in/exists用法和效率大揭密
- 用 servlet 来创建一个用户登录界面
- mysql创建数据库并创建表
- 设计一个不能被继承的类
- Cannot access android.support.v4.app.BaseFragmentActivityHoneycomb
- 常用用户输入验证
- facebook提供的持有环检测工具(待总结)
- HTML第一章上机练习4