css叠加优先级问题
来源:互联网 发布:电视的mac地址怎么查 编辑:程序博客网 时间:2024/05/16 00:47
在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。
我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。
4个等级定义如下
- 第一等:代表内联样式,如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为100。
- 第三等:代表类,伪类和属性选择器,如.content,权值为10。
- 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
例如上图为例,
其中#NAV为二等选择器,
.ACTIVE为三等选择器,
UL、LI和A为四等选择器。
则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113
举一个具体的例子
以下是CSS代码:
#content div #main-content h2{ color:red;}#content #main-content>h2{ color:blue;}body #content div[id="main-content"] h2{ color:green;}#main-content div.paragraph h2{ color:orange;}#main-content [class="paragraph"] h2{ color:yellow;}div#main-content div.paragraph h2.first{ color:pink;}
以下是HTML代码:
<div id="content"> <div id="main-content"> <h2>CSS简介</h2> <p>层叠样式表</p> <div class="paragraph"> <h2 class="first">使用CSS布局优点</h2> <p>1、表现和内容相分离2、提高页面浏览速度3、易于排版维护4、复合w3c标准</p> </div> </div></div>
对比答案
- 第一个特殊性的值=2*100+2*1=202
- 第二个特殊性的值=2*100+1=201
- 第三个特殊性的值=1*100+1*10+3*1=113
- 第四个特殊性的值=1*100+1*10+2*1=112
- 第五个特殊性的值=1*100+1*10+1*1=111
- 第六个特殊性的值=1*100+2*10+3*1=123
结语
第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军,后面一些规则虽然看起来好像更复杂,但特殊性并不是拼谁的选择器表达式写得更长,ID选择器才是王道!
0 0
- css叠加优先级问题
- CSS外边距叠加问题
- CSS优先级问题
- CSS优先级问题
- CSS选择器优先级问题
- css中的优先级问题
- css优先级问题总结
- CSS优先级问题
- Css样式优先级问题
- CSS优先级问题
- css优先级问题
- CSS优先级问题
- css 选择器优先级问题
- CSS外边距叠加的问题
- CSS中外边距叠加问题
- 关于CSS外边距叠加问题
- CSS外边距叠加的问题
- CSS中外边距叠加问题
- Android开发中,使用WIFI API时的两个陷阱(第一篇,共二篇)
- 快速排序
- iOS原生地图热点搜索和基本使用汇总
- Android Studio多渠道打包和代码混淆教程
- 3 java ee(3)----JSP和servlet
- css叠加优先级问题
- 【JAVA秒会技术之加密】3DES(TripleDES)实现跨平台统一加密
- 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上往下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该函数。
- 一道失手率极高的成员内部类面试题
- Windows机器通过FTP上传文件,配置FileZilla
- 希尔排序
- Windows下git与eclipse的安装与配置
- VC http post 文件到服务器
- 洛谷 P1736 创意吃鱼法