【CSS】选择器优先级
CSS的选择器优先级的权重
在 Selectors Level 3 规范中，一个选择器的优先级（权重）由依次串联的a、b、c三个标记来计算
a: ID选择器 如#header
b: class选择器如.header 属性选择器如[title] 伪类如:link
c: 标签选择器如h1 伪元素选择器如::after
注意：伪类:not不参与优先级的计算
一些例子
只要一个选择器的 a>0，b=0，即使另外一个选择的a=0, b=161，那么前者的权重依然更大。
a:link{
color: red; /* 优先级:a=0,b=1,c=1 */
}
.test{
color: yellow; /* 优先级:a=0,b=1,c=0 */
}
他们的权重（优先级）b是相等的，但是c标记中，前者大于后者，所以最终「a:link」生效显示为红色。
:not() 不参与优先级的计算 但()里面的选择器要计算在内
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors Level</title>
<style type="text/css">
.inner:not(.outer) p {
color: red;
}
.outer .inner p {
color: orange;
}
</style>
</head>
<body>
<div class="outer">
<p>outer</p>
<div class="inner">
<p>inner</p>
</div>
</div>
</body>
</html>
这个inner会显示orange 因为两个优先级相同，下面的会覆盖上面的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors Level</title>
<style type="text/css">
.inner:not(#outer) p {
color: red;
}
.outer .inner p {
color: orange;
}
</style>
</head>
<body>
<div class="outer">
<p>outer</p>
<div class="inner">
<p>inner</p>
</div>
</div>
</body>
</html>
而这个例子会显示蓝色，上面的:not()内的id选择器也要计算在内
参考链接：
1.知乎的讨论：http://www.zhihu.com/question/21777264
2.某博客：http://www.clanfei.com/2013/11/1731.html
【CSS】选择器优先级的更多相关文章
- 关于Css选择器优先级
今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...
- 深入理解CSS选择器优先级
题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...
- CSS选择器优先级（转）
原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...
- day44:CSS选择器优先级&JS基础
目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...
- 看完就懂--CSS选择器优先级的计算
CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 深入理解CSS选择器优先级的计算
选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...
- 导航栏布局时遇到的问题以及解决办法 css选择器优先级
得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...
- 前端CSS css引入方式 css选择器 css选择器优先级
一. CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...
随机推荐
- RAD介绍及实战，LVM介绍及实战，磁盘常见故障
目录 一.RAID 1.RAID好处: 2.RAID的运行方式: 3.RAID的级别: 二.RAID实战 软RAID 1.RAID0 2.RAID1 3.RAID5 4.RAID10 三.LVM介绍 ...
- centos 搭建本地YUM源并使用apache共享YUM源
搭建本地YUM源 1.挂载镜像 2.搭建本地YUM源 删除多余repo文件保留一个就行 本地YUM源就搭建好了 yum repolist 查看yum源 3.使用apache共享YUM源 YUM服务器配 ...
- 从零开始做一个Android自动化
移动端自动化简单说就是,写好操作app的程序,运行起来,自动执行程序和测试用例,输出执行结果,结果正确,测试通过. 自动化可以方便地完成安装/卸载.启动/运行.UI适配等环节,节省时间: 同一测试脚本 ...
- ubuntu安装samba
1, sudo apt-get install samba sudo apt-get install smbclient 2, vi /etc/samba/smb.conf 在最后加字段(为可读可 ...
- string,const char*, char*转换之后还是指向同一片内存地址么？
class Same { public: void reverse(const char* str) { char* A = const_cast<char*>(str); A[] = ' ...
- Mybatis基于XML配置SQL映射器(一)
Durid和Mybatis开发环境搭建 SpringBoot搭建基于Spring+SpringMvc+Mybatis的REST服务(http://www.cnblogs.com/nbfujx/p/76 ...
- Random Point in Triangle
题目链接 题意:多组输入三角形各个顶点坐标p1,p2,p3,在三角形中任取一点p,计算 期望E=max(S(p,p1,p2),max(S(p,p1,p3),S(p,p2,p3))); 思路:用随机数找 ...
- 建立一个更高级别的查询 API：正确使用Django ORM 的方式
https://www.oschina.net/translate/higher-level-query-api-django-orm
- 修改Mysql procedure,function and view definer
1 一次性修改遇到错误 update mysql.proc set definer='root@%'; update mysql.proc set definer='root@%'; ERROR 10 ...
- 2019ccpc网络赛hdu6703 array(线段树)
array 题目传送门 解题思路 操作1是把第pos个位置上的数加上\(10^7\),操作2是找到区间[1,r]中没有且大于k的最小的数.注意到k的范围是小于等于n的,且n的范围是\(10^5\),远 ...