一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　   

首先看看一道阿里这期网申的题目吧！

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: #000;
}

  3. ID选择器

#content{color: blue;
}

  4. 通用元素选择器，匹配任何元素（IE5.5不支持）

*{width: 1000px;
}

组合选择器

1. 群组选择器

/** 格式* 选择器A, 选择器B{样式规则}*/
div, body{width: 1200px;
}

对N个选择器获取的dom元素应用同一个样式，减少重复代码。

2. 后代选择器（派生选择器）

/** 格式* 父选择器 后代选择器{样式规则}*/
body div{color: #888;
}

body下的所有div元素均应用上述样式。

3. 子元素选择器（IE5.5~IE6不支持）

/** 格式* 父选择器 > 子元素选择器{样式规则}*/
body > div{color: #111;
}

仅body的div孩子元素才应用上述样式。

4. 毗邻弟弟元素选择器（原名相邻兄弟元素选择器）（IE5.5~IE6不支持）

/** 格式* 选择器A + 选择器B{样式规则}*/
#content + div{color: #111;
}

仅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: #222;
}

仅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会自动从1开始自增长，至于何时才停止就不得而知了；

  ③.纯数字n，如2n，指定匹配偶数位置索引的元素，n会自动从1开始自增长，至于何时才停止就不得而知了；

  ④.纯数字n +/- 纯数字，如2n+1，指定匹配奇数位置索引的元素，n会自动从1开始自增长，至于何时才停止就不得而知了。

  动态伪类选择器（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; importantwidth: 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

转载于:https://www.cnblogs.com/kenshinobiy/p/5038492.html

***CSS魔法堂：选择器及其优先级相关推荐

  1. CSS魔法堂：说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

  2. CSS魔法堂：重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  3. CSS魔法堂：更丰富的前端动效by CSS Animation

    前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...

  4. CSS魔法堂：重拾Border之——更广阔的遐想

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  5. CSS魔法堂：那个被我们忽略的outline

    前言  在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性--outline,由于之前对其印象确实有些模糊,于是本文打算对其 ...

  6. CSS魔法堂：深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

  7. CSS魔法堂：你一定误解过的Normal flow

    前言  刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...

  8. CSS魔法堂：那个被我们忽略的outline 1

    前言  在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性--outline,由于之前对其印象确实有些模糊,于是本文打算对其 ...

  9. CSS魔法堂：hasLayout原来是这样!

    前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasL ...

  10. CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

最新文章

  1. 剑指offer：面试题14- I. 剪绳子
  2. JUnit注解与hamcrest
  3. 产品经理必备知识之网页设计系列（一）-创建出色用户体验
  4. MySQL 之视图、 触发器、事务、存储过程、内置函数、流程控制、索引(一)
  5. AtCoder Regular Contest 120 C - Swaps 2 线段树模拟
  6. 监督学习 | 朴素贝叶斯原理及Python实现
  7. web应用调试工具_如何使用浏览器开发人员工具调试渐进式Web应用程序
  8. html编写输出学生姓名,用C++编写一个学生信息管理系统
  9. PHP中多维数组var_dump展示不全
  10. 关闭layui的弹出层，还会遮罩后面的界面
  11. 3、plt.figure()和Axes类
  12. Linux日志终极指南
  13. 计算机二级access无忧考吧破解,无忧考吧access模拟考试软件
  14. 基于树莓派的AirPlay功能实现
  15. 计算机中的随机存储器和只读存储器是什么,只读存储器和随机存储器的主要区别是什么...
  16. access中，客户端和服务器端链接数据库的详细代码
  17. java word 加密_java 加密解密WORD文档
  18. 有哪些道理是你毕业多年后才明白的？
  19. 拒绝同质化，主题酒店大势所趋
  20. w ndows默认截图工具,Windows上有哪些自带的截图功能？快来学习吧！

热门文章

  1. 微服务网关Kong 1.0正式发布！提供100+项功能
  2. 分布式系统的架构思路
  3. 日志采集框架Flume以及Flume的安装部署（一个分布式、可靠、和高可用的海量日志采集、聚合和传输的系统）...
  4. 索引维护存储过程(作业调用)
  5. [CentOS] CentOS 使用yum安装 php，mysql, apache
  6. The user does not exist or is not unique错误
  7. vue+django2.0.2-rest-framework 生鲜项目（八）
  8. 「模拟赛20180307」三元组 exclaim 枚举+树状数组
  9. BZOJ 2793: [Poi2012]Vouchers(调和级数)
  10. Sqoop_ 简单介绍