CSS魔法堂：选择器及其优先级
一、前言
首先看看一道阿里这期网申的题目吧！
1.找出下面优先级相同的选择器
A. img.thumb:after B.[data-job="frontend"]::first-letter
C. #main::before D. [type="checkbox"]:checked E. ul#shop-list
二、回顾选择器类型
html片段
<body>
<div id="content">
<div>Hello world</div>
<div class="block-end">EOF</div>
</div>
</body>
基本选择器
1. 元素（类型）选择器
div{
color: red;
}
2. 类选择器
.block-end{
color: #;
}
3. ID选择器
#content{
color: blue;
}
4. 通用元素选择器，匹配任何元素（IE5.5不支持）
*{
width: 1000px;
}
组合选择器
1. 群组选择器
/** 格式
* 选择器A, 选择器B{样式规则}
*/
div, body{
width: 1200px;
}
对N个选择器获取的dom元素应用同一个样式，减少重复代码。
2. 后代选择器（派生选择器）
/** 格式
* 父选择器 后代选择器{样式规则}
*/
body div{
color: #;
}
body下的所有div元素均应用上述样式。
3. 子元素选择器（IE5.5~IE6不支持）
/** 格式
* 父选择器 > 子元素选择器{样式规则}
*/
body > div{
color: #111;
}
仅body的div孩子元素才应用上述样式。
4. 毗邻弟弟元素选择器（原名相邻兄弟元素选择器）（IE5.5~IE6不支持）
/** 格式
* 选择器A + 选择器B{样式规则}
*/
#content + div{
color: #;
}
仅div#content后紧跟着的同级div应用上述样式，若如 <div id="content"></div><br/><div id="block-end">EOF</div> ，由于div#block-end不是紧跟在div#content后，因此不会应用上述样式。
5. 弟弟元素选择器（原名为兄弟选择器）（IE5.5~IE6不支持）
/** 格式
* 选择器A ~ 选择器B{样式规则}
*/
#content ~ div{
color: #;
}
仅div#content后的同级div都会应用上述样式，如 <div id="content"></div><br/><div id="block-end">EOF</div> ，div#block-end都会应用上述样式。
属性选择器
1. 基础选择器[attr]（如： div[id] ）（IE5.5~IE6不支持）
匹配所有具有该属性，且符合基础选择器条件的元素。
2. 基础选择器[attr=value]（如 div[id=content] ）（IE5.5~IE6不支持）
匹配所有attr的属性值等于value，且符合基础选择器条件的元素。
3. 基础选择器[attr~=value]（如 div[val~=content] ）（IE5.5~IE6不支持）
匹配如<div val="content dir"></div>的元素，就是匹配属性值具有多个空格分隔的值，其中一个值等于value的元素。
4. 基础选择器[attr|=value]（如 div[lang|=en] ）（IE5.5~IE6不支持）
匹配如<div lang="en-us"></div>的元素，就是匹配属性值以value或value-为开头的元素。
5. 基础选择器[attr^=value]（如 div[id^=cont] ）（IE5.5~IE6不支持）
匹配如<div id="content"></div>或<div id="contdummy"></div>的元素，就是匹配属性值以value开头的元素。
6. 基础选择器[attr$=value]（如 div[id$=tent] ）（IE5.5~IE6不支持）
匹配如<div id="content"></div>或<div id="dummytent"></div>的元素，就是匹配属性值以value结尾的元素。
7. 基础选择器[attr*=value]（如 div[id*=ten] ）（IE5.5~IE6不支持）
匹配如<div id="content"></div>或<div id="dummytent"></div>的元素，就是匹配属性值含value的元素。
伪类选择器
我们可将伪类选择器再细分一下，以便记忆！
结构性伪类选择器
1. E:first-child：当元素E作为其父元素下的第一个子元素时，匹配成功。（IE5.5~IE6不支持）
2. E:root：当元素E为文档的根元素（就是HTMLHtmlElement元素）时，匹配成功。(IE均不支持)
3. E:nth-child(n)：当元素E作为其父元素下第N个子元素时，匹配成功。n从1开始。（IE5.5~IE8不支持）
4. E:nth-last-child(n)：与E:nth-child(n)效果一样，只不过是反方向遍历。n从1开始。（IE5.5~IE8不支持）
5. E:nth-of-type(n)：当元素E为其父元素下同类标签的第N个时，匹配成功。n从1开始。（IE5.5~IE8不支持）
6. E:nth-last-of-type(n)：与E:nth-last-of-type(n)效果一样，只不过时反方向遍历。n从1开始。（IE5.5~IE8不支持）
7. E:last-child：当E元素作为其父元素下最后一个子元素时，匹配成功。（IE5.5~IE8不支持）
8. E:first-of-type：与E:nth-of-type(1)效果一样。（IE5.5~IE8不支持）
9. E:last-of-type：与E:nth-last-of-type(1)效果一样。（IE5.5~IE8不支持）
10.E:only-child：当E元素为其父元素下的唯一一个子元素，匹配成功。（IE5.5~IE8不支持）
11.E:only-of-type：当E元素为其父元素下的唯一一个该标签类型的子元素时，匹配成功。（IE5.5~IE8不支持）
12.E:empty：当E元素下不包含任何子元素时，匹配成功。注意：文本节点也被视为子元素。（IE5.5~IE8不支持）
注意：nth-child(n)中n的合法写法如下
①.纯数字，指定位置索引，索引从1开始；
②.n，指定匹配所有位置索引，n会自动从0开始自增长，至于何时才停止就不得而知了，表达式结果为0时自动转换为；
③.纯数字n，如2n，指定匹配偶数位置索引的元素，n会自动从0开始自增长，至于何时才停止就不得而知了，表达式结果为0时自动转换为1；
④.纯数字n +/- 纯数字，如2n+1，指定匹配奇数位置索引的元素，n会自动从0开始自增长，至于何时才停止就不得而知了，表达式结果为0时自动转换为。
动态伪类选择器（E:hover，IE5.5~7只支持在a元素上应用，IE8+支持在其他元素上使用）
1. E:link：当元素E（a标签）未被点击时，匹配成功。
2. E:visited：当元素E（a标签）点击过时，匹配成功。
3. E:hover：必须在E:link、E:visited后声明才有效。当元素E（IE5.5~7时为a标签，IE8+可为其他标签）正被鼠标悬停时，匹配成功。
4. E:active：必须在E:hover后声明才有效。当鼠标已经在元素E（a标签）按下，但未释放左键时，匹配成功。
5. E:focus：当元素E（元素E必须为可以接收键盘或用户输入的元素）获得焦点时，匹配成功。（IE8的标准模式开始支持）
语言 :lang伪类选择器（IE5.5~8不支持）
1. E:lang(c)：当元素的lang属性等于c时，则匹配成功。
UI元素状态伪类选择器（IE5.5~8不支持）
1. E:enabled：元素E（E为表单元素）可用时，匹配成功。
2. E:disabled：元素E（E为表单元素）不可用时，匹配成功。
3. E:checked：元素E（E为input[type=radio]或input[type=checkbox]元素）被钩选时，匹配成功。
否定伪类选择器（IE5.5~8不支持）
1. E:not(其他类型的选择器)：当元素E不符合其他类型的选择器条件时，匹配成功。
E:target 伪类选择器（ IE浏览器完全不支持:target伪类，另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器）
1. E:target：当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使 用:target伪类来控制目标的样式。
::selection 伪类选择器（IE5.5~8不支持）
1. E::selection：被用户选区的元素部分
伪元素选择器
伪元素就是浏览器自动在匹配的匹配元素前、后增加的元素，或者是截取匹配元素内的一部分。
1. E:before（新写法E::before）：用于向元素E前添加内容（IE8的标准模式开始支持）
2. E:after（新写法E::after）：用于向元素E后添加内容（IE8的标准模式开始支持）
示例：
<style type="text/css">
div:before{
content: "beforeDiv"
}
div:after{
content: "afterDiv"
}
</style>
<div>content</div>
效果是： beforeDivcontentafterDiv
3. E:first-line（新写法E::first-line）：仅仅当元素E为块级元素时有效。用于向元素E中的文字的首行添加特殊样式。
4. E:first-letter（新写法E::first-letter）：用于向元素E的首个字母添加特殊样式
5. E:input-placeholder：用于向元素E的placeholder添加特殊样式。由于未成为W3C规范，因此需要加浏览器厂商前缀，具体如下
/*for old version of ff*/
input:-moz-input-placeholder{
}
input:-ms-input-placeholder{
}
/*for modern browsers*/
input::-webkit-input-placeholder{
}
input::-moz-input-placeholder{
}
而且仅有以下属性可用：color、font-size、font-style、font-weight、letter-spacing、line-height、padding、text-align、text-decoration。
注意：
/* 由于伪元素选择器必须为最后一个选择器，因此下列css样式将失效 */
div::before div{
width: 100px;
height: 100px;
background-color: red;
}
三、选择器的优先级计分规则
优先级是决定不同选择器的相同样式规则对同一元素的生效情况，优先级高的将覆盖优先级低的样式规则。而优先级又受到样式来源和选择器特殊性的影响，下面我们一起来了解以下。
1. 来源
行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式
2. 特殊性（由四个纬度组合）
| 选择器类型 | 纬度（a,b,c,d） |
| 行内样式 | 1,0,0,0 |
| ID选择器 | 0,1,0,0 |
| 类选择器、属性选择器、伪类选择器 | 0,0,1,0 |
| 元素（类型）选择器，伪元素（类型）选择器 | 0,0,0,1 |
| 通用元素选择器、伪类:not选择器 | 0,0,0,0 |
注意：多种选择器类型时，同位叠加即可得到总纬度。
参考：http://www.w3.org/TR/CSS21/cascade.html#specificity
3. 计算优先级的流程
(a). 首先根据选择器类型计算出总纬度
(b). 若纬度相同则比较来源
(c). 若前两者相同，则后面声明的优先级高。
4. 通过!important提高优先级(IE5.5~6不支持)
通过在样式规则后面添加!important关键词，可以将该样式规则提高到最高优先级。
.test{
color: red !important;
color: blue;
}
IE5.5~6下, 匹配元素的文字为blue;而其他浏览器则为蓝色；IE7+下就显示红色。
但!important不是一个优雅的办法，而且会使得样式难以调试，下面是时是使用建议：
1. 永远不要在全局CSS规则中使用;
2. 永远不要在自制的插件中使用;
3. 只在需要覆盖全局或外部插件的css规则（如Extjs、YUI插件的样式）的特定页面中才使用;
4. 首先考虑使用优先级来解决问题而不是!important.
适合使用的场景：
将行内样式提取出来时，但此时已经有一个全站样式了;
覆盖!important：
/* 宽度为200px */
E {
width: 200px; !important
width: 100px;
}
/* 宽度为300px */
E {
width: 200px; important
width: 100px;
width: 300px; important
}
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
5. 伪类 :not 选择器纬度为0,0,0,0
伪类 :not 选择器自身纬度为0,0,0,0 ，但其括号内部的选择器纬度则和上述表格一致。 div:not(.content) { width: 100px; } 优先级计算如下：
div ── 纬度 0,0,0,1
:not ── 纬度 0,0,0,0
.content ── 纬度 0,0,1,0
总纬度 ── 0,0,1,1
6. IE6中的bug
IE6中伪类 :hover 、 :active 和 :visited 选择器的纬度不是0,0,1,0，而是0,0,2,0。
// 纬度是0,0,2,1
.cls1 .cls2 a{
color: red;
}
// IE6下的纬度是0,0,2,1
// IE7+的纬度是0,0,1,1
a:hover{
color: blue;
}
参考：
http://www.cnblogs.com/ddshou/archive/2009/05/05/1449768.html
http://www.cnblogs.com/ddshou/archive/2009/05/05/1449770.html
四、浏览器解析选择器的顺序——key selector（关键字查询）
就是从右向左解析选择器，这样效率就更高了。
五、一起做题木吧！
A. img.thumb:after，总纬度是0,0,1,2
B.[data-job="frontend"]::first-letter，总纬度是0,0,1,1
C. #main::before，总纬度是0,1,0,1
D. [type="checkbox"]:checked，总纬度是0,0,2,0
E. ul#shop-list，总纬度是0,1,0,1
由于该题目假定样式来源一致，因此样式优先级相同的就是C和E了。
六、参考
CSS选择器 http://www.cnblogs.com/liontone/archive/2010/12/29/1920437.html
http://www.w3school.com.cn/cssref/css_selectors.asp
http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120134491240171/
http://blog.csdn.net/stationxp/article/details/38736261
七、 总结
选择器是连接标签和样式规则的桥梁，熟悉它们和浏览器支持情况并作适当的填坑，将方便我们开发。
尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/3940732.html ^_^肥仔John
CSS魔法堂：选择器及其优先级的更多相关文章
- CSS魔法堂：小结一下Box Model与Positioning Scheme
前言 对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考. <CSS魔法堂:重新认识Box Model.IFC.B ...
- CSS魔法堂：说说Float那个被埋没的志向
前言 定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
- CSS魔法堂：一起玩透伪元素和Content属性
前言 继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...
- CSS魔法堂：Box-Shadow没那么简单啦:)
前言 说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...
- CSS魔法堂：重拾Border之——更广阔的遐想
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂：重拾Border之——不仅仅是圆角
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂：重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂：重拾Border之——解构Border
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂："那不是bug，是你不懂我!" by inline-block
前言 每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发 ...
- CSS魔法堂：你一定误解过的Normal flow
前言 刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...
随机推荐
- iOS：OC Lib：MagicalRecord
# MagicalRecord 2.1 ## 前言 CoreData是iOS开发中经常使用的数据持久化的技术.但其操作过程稍微繁琐,即使你只是实现简单的存取,不涉及请求优化,也要进行许多配置工作,代码 ...
- Socket原理与编程基础（转）
一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...
- 分享自己写的一个小工具RGB转十六进制（高手勿喷）
由于工作经常美工给的颜色是rgb,而我们网页里面是16进制.网上也有很多类型的工具.不过似乎都用浏览器打开.没网就不爽了 实现也很简单.代码已经共享了 http://git.oschina.net/w ...
- AYUI快速开发2016-6-29 ，全部免费,WPF普遍之路梦想开启
下载开发模板:下载 AYUI 6月29日起,免费使用,无需授权,去除所有限制,关爱开发者,不求捐赠,只要你们能私活挣到钱就行,你们没有欠我的.我希望所有人都能开发WPF的东西 使用教程,上面的下载文件 ...
- 【ASP.NET MVC 5】第27章 Web API与单页应用程序
注:<精通ASP.NET MVC 3框架>受到了出版社和广大读者的充分肯定,这让本人深感欣慰.目前该书的第4版不日即将出版,现在又已开始第5版的翻译,这里先贴出该书的最后一章译稿,仅供大家 ...
- RS开发中的一些小技巧[不定期更新]
从9月份一直忙到了现在,项目整体的改版工作也完成了十有八九了,有些事情只有你自己真正的做了,你才能明白:哦,原来还可以这个样子,这样做真的好了很多呢,接下来我就分享一些最近遇到的RS开发的一些小技巧, ...
- HDU 5902 GCD is Funny 数学
GCD is Funny 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5902 Description Alex has invented a ne ...
- linux 系统性能指标采样脚本
以下脚本写于redmine性能排查时,用于定位系统性能瓶颈的采样,源地址为~/performanceLog/collectLog.sh中,计划放入github的代码片段库中. 注: 如果mysql的地 ...
- Service Station - An Introduction To RESTful Services With WCF
Learning about REST An Abstract Example Why Should You Care about REST? WCF and REST WebGetAttribute ...
- 在Windows 2008/2008 R2 上配置IIS 7.0/7.5 故障转移集群
本文主要是从:http://support.microsoft.com/kb/970759/zh-cn,直接转载,稍作修改裁剪而来,其中红色粗体部分,是我特别要说明的 若要配置 IIS 7.0 和 7 ...