CSS3选择器

本文讨论以下10种选择器

1.基本选择器

选择器	描述
*(通配)	文档的所有元素
E（元素）	指定类型的所有元素
#id(ID)	指定ID的唯一元素
.class(类)	指定类名的所有元素
selector1,selector2	指定多个选择器匹配的元素

注意事项：

多类选择器的写法：.class1.class2{…}
元素必须同时匹配这几个类时样式方可生效，且IE6不支持多类选择器，将会以末尾类名为准。

2.层次选择器

选择器	描述
E    F(后代)	指定节点E的所有后代元素
E > F（子）	指定节点E的儿子辈元素
E + F(相邻兄弟)	紧挨着节点E的下一个兄弟元素
E ~ F(通用兄弟)	排在节点E后的所有兄弟元素

注意事项：

使用子选择器，有时候会出现和使用了后代选择器一样的效果。那是因为有些CSS属性会继承至后代元素，即原本的目标元素（儿子层元素）样式生效后，其后代会继承该样式；使用时需要注意。

兼容性：

1、后代选择器：所有浏览器都支持。
2、子、相邻兄弟、通用兄弟选择器：IE7及其以上版本的浏览器支持。

3.动态伪类选择器

选择器	描述
E : link       (链接伪类选择器)	匹配元素（定义了超链接+未被访问过）
E : visited (链接伪类选择器)	匹配元素（定义了超链接+已被访问过）
E : hover (用户行为伪类选择器)	匹配元素（鼠标停留在该元素上）
E : active(用户行为伪类选择器)	匹配元素（被点击/激活）
E : focus  (用户行为伪类选择器)	匹配元素（该元素获得焦点）

注意事项：

锚点伪类的设置需遵循LoVe+HAte（link、visited、hover、active）的顺序原则。

兼容性：

1、E:active和E:focus只有IE8及以上的浏览器支持。
2、IE6浏览器仅支持E:hover中的链接锚点a:hover。

4.目标伪类选择器

选择器	描述
E : target	当页面URL内包含#+标识符时，当触发链接到目标元素时，目标元素的样式会生效。

注意事项：

一般#后面跟着的是锚点名称或者元素ID。示例：手风琴显示/隐藏效果。

兼容性：

IE8及以下版本不支持。

5.语言伪类选择器

选择器	描述
E : lang(language)	当页面URL内包含#+标识符时，当触发链接到目标元素时，目标元素的样式会生效。

注意事项：

选择器括号内的language为< html >标签内的属性lang的值，适用于多语言版本的网站，为不同语言版本的设定不同的样式。

兼容性：

IE7及以下版本不支持。

6.UI元素状态伪类选择器

选择器	描述
E : checked	匹配选中状态的单(复)选按钮元素
E : enabled	匹配启用状态的表单元素
E : disabled	匹配禁用状态的表单元素

注意事项：

写法上，例如input:disabled可以写成input[disabled]。

兼容性：

IE8及以下版本不支持。

7.结构伪类选择器

选择器	描述
E : first-child	匹配父元素的第一个子元素
E : last-child	匹配父元素的最后一个子元素
E : root	匹配元素所在文档的根元素（始终是HTML）
E : nth-child(n)	匹配父元素的第n个子元素
E : nth-last-child(n)	匹配父元素的倒数第n个子元素
E : first-of-type	匹配父元素的第一个E类型的子元素
E : last-of-type	匹配父元素的最后一个E类型的子元素
E : nth-of-type（n）	匹配父元素的第n个E类型的子元素
E : nth-last-of-type(n)	匹配父元素的倒数第n个E类型的子元素
E : only-child	匹配父元素的唯一一个子元素
E : only-of-type	匹配父元素的唯一一个E类型的子元素
E : empty	匹配没有子元素的元素E

注意事项 + 技巧：

1. nth-child(n)和nth-of-type(n)的区别：前者是父元素的第n个子元素（没有指定元素类型），适用于父元素下都是统一类型标签的DOM树。而后者则是选中父元素下的第n个指定了节点类型的元素，相对更加可靠和稳定。同类带last的选择器同理。
   
   
2. 部分选择器的参数n取值是从1开始的整数，参数部分亦可以是关键词（odd/even）和表达式（如2n/2n+1,表达式的n取值从0开始）。
   
   
3. nth-child(n)的参数在取值为关键词odd时，选中的是奇数类元素，参数为even时则选中偶数类元素。而nth-last-child(n)的参数取值odd/even时情况完全相反。
   
   
4. nth-child(n+3)：选中的是从第3个直至最后一个元素；
   nth-child(-n+3)：选中的是从第1个直至第3个元素；
   E:nth-child(n+2):nth-last-child(n+2)：选中的是除掉第1个和最后一个后剩余的全部子元素。
   
   

兼容性：

IE8及以下版本不支持。

8.结构伪类选择器

选择器	描述
E : not(F)	匹配所有除元素F以外的E元素。

注意事项：

常用于表单元素中，例如：input:not([type=”submit”]){…}就实现了给除提交按钮外的所有input定义样式。

兼容性：

IE8及以下版本不支持。

9.伪元素

选择器	描述
E :: first-letter	匹配文本块的首字母。
E :: first-line	匹配文本块的首行文字。
E :: before	在标签内容前可插入的内容
E :: after	在标签内容后可插入的内容
E :: selection	匹配突出显示的文本（鼠标右键选中部分）

注意事项：

1. 通过::before和::after在标记内容前/后插入的内容并不会成为DOM的一部分，但它仍然可以设置样式。
   
   
2. ::selection仅接受2个属性：background(背景色)和color(前景色)。
   
   
3. 单冒号和双冒号在CSS3中主要用来区别伪类和伪元素，IE6~8仅支持单冒号的写法，而现代浏览器2种写法都支持。
   
   

兼容性：

各浏览器均支持伪元素；
唯独：::selection，Webkit内核浏览器支持，火狐需要加上私有属性-moz（即::-moz-selection）才支持，而IE系列只有IE9支持。

10.属性选择器

选择器	描述
E :: [attr]	匹配拥有属性attr的E元素
E :: [attr=val]	匹配拥有属性attr且值为val的E元素
E :: [attr|=val]	匹配拥有属性attr且值为val或者以val-开头字符串的E元素
E :: [attr~=val]	匹配拥有属性attr且值包含val的E元素
E :: [attr*=val]	匹配拥有属性attr且值包含val字符串的E元素
E :: [attr^=val]	匹配拥有属性attr且值为以val开头字符串的E元素
E :: [attr$=val]	匹配拥有属性attr且值为以val结尾字符串的E元素

注意事项：

1. 属性选择器可以多个同时并列使用
   例如：a[id][title*=w3c][class~=item]{color: lime;}
   
   
2. E:[attr=val]{…}生效的前提是属性attr的值只有一个且值为val。
   E:[attr=val]{…}当属性值有多个时，选择器val部分的书写必须严格按照HTML的属性值的顺序原样书写才能生效。

兼容性：

IE7及其以上版本等主流浏览器均支持。

11.补充内容：CSS引用方式+代码优先级

CSS代码优先级规范：

1. 这里有一个权值的概念，标签的权值为1，类选择符的权值为10，ID选择符的权值为100，继承的权值最低，貌似是0.1；
   
   举例说明：
   p{color:red;}的权值为1；
   p span{color:red;}的权值为2；
   .text p{color:red;}的权值为11；
   #test .text p{color:red;}的权值为111；
   
   浏览器依据CSS代码的权值高低来选择谁将生效，一句话就是：权值高者说了算。

CSS引用方式优先级规范：

1. 3种CSS代码引用方式的优先级为：内联式>嵌入式>外部式；嵌入式>外部式的前提是<style>...</style>代码在<link>代码的后面；总体来说，优先级可以视作就近原则；其中，内联离目标元素最近，嵌入式次之，外部式最远。
   
   
2. 上述的优先级排序有个大前提，就是代码的权值相同。
   例如：针对文档内部的<p class="text">测试文字</p>，外部引用的css文件内的.text{color:red;}的优先级还是高于嵌入式的<style>p{color:blue;}</style>，因为外部css内部的代码的权值10大于嵌入式的代码权值1，最后段落p生效的color样式为红色。
   
   

3. 层叠概念：同一个元素具有多条权值相同的css样式存在的情况；此时，代码位置靠后的优先级更高。
   例如：
   <style>p{color:red;}p{color:blue;}</style>
   
   小结：CSS样式出现冲突时，权值高者优先，权值相同时，位置靠后者（link和style标签均在head标签内）优先。

4. 重要性：特殊情况下需要为某些样式设置最高权值，这个时候就需要依靠!important后缀了。
   
   大范围的网页样式的优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式。值得注意的是，添加!important后的样式权值仍高于用户自己设置的样式。