2.CSS笔记：选择器汇总

本系列内容由ZouStrong整理收录

整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com

得益于CSS强大的选择器，我们可以方便的向一组同类型的元素应用样式

选择器决定了CSS规则将影响文档中的哪些部分

对于没有特殊说明的，都是全浏览器支持的

一. 元素选择器——Element Selectors

元素选择器：选择指定元素名的元素

p {} 

通配选择器：选择所有元素（遍历所有元素，性能较低，避免使用）

* {}   /*IE6不支持，会将它忽略，变相的能看到效果*/

通配选择器表面上相当于所有元素选择器的分组，但是略有不同（详见特殊性篇）

类选择器：选择class包含指定值的元素（p.class的使用更有利于性能）

.class {}

多类选择器：选择class同时包含多个值的元素（顺序不限）

.aa.bb {}   /*IE6、IE7不支持，会解析成.bb*/

id选择器：选择id等于指定值的元素（p#id的使用不利于性能）

#id {}          

没有多id选择器，因为id不允许空格分隔的多个值，并且id选择器一般不会使用，id通常只作为JS的钩子而已

二. 关系选择器——Relationship Selectors

后代选择器（上下文选择器）：选择p元素的所有后代元素a

p a {}

子选择器：选择p元素的所有子元素a

p > a {}     /*IE6不支持*/

非子选择器（就是后代选择器）：选择p元素的所有非子元素a

p  *  a {}

由于IE6不支持子选择器，因此可以这样模拟

div a {font-weight:bold;}
div * a {font-weight:normal;}

相邻兄弟选择器：选择紧贴在p元素之后的兄弟元素a（元素之间的文本内容不影响相邻兄弟选择器起作用）

p + a {}     /*IE6不支持*/

（CSS3） 兄弟选择器：选择p元素之后的所有的兄弟元素a（元素之间的文本内容不影响兄弟选择器起作用）

p ~ a {}     /*IE6不支持*/

三.属性选择器——Attribute Selectors

选择带有指定属性的元素（可多个属性）

a[attr] {}     /*IE6不支持*/
a[attr][attr2] {}     /*IE6不支持*/

选择带有指定属性且完全等于指定属性值的元素（可多个属性）

a[attr="…"] {}     /*IE6不支持*/
a[attr="…"][attr2="…"] {}     /*IE6不支持*/

选择带有指定属性且包含空格分隔的指定属性值的元素

a[attr~="…"] {}     /*IE6不支持*/

对于支持的浏览器来说，其实比类选择器还要强大

div[class~="strong"] {}

完全等同于

div.strong {}

选择带有指定属性且属性等于指定值或以指定值加"-"开头的元素

a[attr|="…"] {}     /*IE6不支持*/

（CSS3）选择带有指定属性并以指定属性值开头的元素

a[attr^="…"] {}     /*IE6不支持*/

（CSS3）选择带有指定属性并以指定属性值结尾的元素

/*可以方便的选择指定后缀的内容*/
a[attr$="…"] {}     /*IE6不支持*/

（CSS3）选择带有指定属性并且属性值包含指定字符的元素

a[attr*="…"] {}     /*IE6不支持*/

注意：属性值是区分大小写的

四. 伪类选择器——Pseudo-Classes Selectors

伪类指的是同样也是类，但没有实际添加到标签中的类（仅仅为了添加样式就要去添加实际的类，例如鼠标悬浮就添加hover类，然后应用样式，但这种做法有点傻，于是就有了伪类）

通过伪类可以在某种事情发生时，将规则应用到标签上，冒号用于表示伪类

1. 静态伪类——只用于链接

选择未被访问的超链接（必须有href属性和值）

a {}  /*匹配所有a元素*/
a:link {}   /*只匹配带有href属性和值的a元素*/

选择已被访问的超链接（必须有href属性）

a:visited {}

2. 动态伪类——可用于任何元素

选择鼠标悬停的元素

:hover {}    /*IE6只支持a元素上的:hover*/

选择被激活的元素（按下鼠标时）

:active {}  /*IE6、7只支持a元素上的:active*/

选择获得焦点的元素（该元素的onfocus事件发生）

:focus {}   /*IE6、IE7不支持*/

webkit内核浏览器会默认给:focus状态的元素加上outline的样式，所以要记得去掉（outline:none）

小结

为链接应用伪类时，不必全部应用4种状态，倘若全部应用，必须按照 :link，:visited，:focus，:hover，:active的顺序，否则浏览器会忽略某些不按顺序出现的规则（层叠机制导致，详见后）（love和hate两个词）

动态伪类的实际问题就是，例如当鼠标悬浮时，增大文本，这个效果就需要重绘文档（重新显示链接之后的所有内容）体验不好，性能也差，并且CSS规范要求文档在第一次显示之后，直到浏览器刷新之前都不必重绘文档，所以不能完全依赖预想的结果（CSS3的tsansform:scale()就不需要重绘文本）

3. 其它伪类

选择使用特定语言的元素（html元素的lang属性）

:lang {}   /*IE6、IE7不支持*/

选择作为某元素第一个子元素的p元素

p:first-child {}   /*IE6不支持*/

（CSS3）选择作为某元素最后一个子元素的p元素

p:last-child {}   /*IE6~8不支持*/

（CSS3）选择作为某元素唯一一个子元素的p元素

p:only-child {}   /*IE6~8不支持*/

（CSS3）选择作为某元素第n个子元素的p元素（参数可以是数字，关键字（odd,even）和公式(2n,2n+1)）

p:nth-child(n) {}   /*IE6~8不支持*/

（CSS3）选择作为某元素倒数第n个子元素的p元素

p:nth-last-child(n) {}   /*IE6~8不支持*/

（CSS3）选择同类型中的第一个同级兄弟元素p

p:first-of-type {}   /*IE6~8不支持*/

（CSS3）选择同类型中的最后一个同级兄弟元素p

p:last-of-type {}   /*IE6~8不支持*/

（CSS3）选择同类型中的唯一同级兄弟元素p

p:only-of-type {}   /*IE6~8不支持*/

（CSS3）选择同类型中的第n个同级兄弟元素p

p:nth-of-type(n) {}   /*IE6~8不支持*/

（CSS3）选择同类型中的倒数第n个同级兄弟元素p

p:nth-last-of-type(n) {}   /*IE6~8不支持*/

(CSS3)选择不含有指定选择符的元素（不带引号）

:not(.a) {}   /*IE6~8不支持*/

.test li:not(:last-child) {
	border-bottom: 1px solid #ddd;
}

(CSS3) 选择根元素（html元素）

:root{}   /*IE6~8不支持*/

(CSS3)选择没有任何内容的元素（空元素）

:empty {}   /*IE6~8不支持*/

(CSS3)选择处于选中状态的元素（单选和复选框）

:checked {}   /*IE6~8不支持*/

(CSS3) 选择处于可用状态的元素（大多用于表单元素）

:enabled {}   /*IE6~8不支持*/

** (CSS3)**选择处于禁用状态的元素（大多用于表单元素）

:disabled {}   /*IE6~8不支持*/

(CSS3) 选择相关URL指向的元素（URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素，该选择器用于选取当前活动的目标元素）

:target {}   /*IE6~8不支持*/

:first、@page:left、@page:right三个伪类选择器，用于设置打印样式，暂不涉及

小结

1，最常见的错误就是认为 p:first-child 之类的选择器选择的是p元素的第一个子元素，不过，要记住伪类的本质，它是把某种"虚拟类"添加到与伪类相关的元素上

2，CSS里都是从1开始计数的，所以jQuery中 使用CSS3部分的选择器也是从1开始计数的，这样就不会混淆了

五. 伪元素选择器——pseudo-Element Selectors

伪元素提供了在文档中添加额外元素的效果，尽管事实上没有添加任何额外元素

选择该元素内的第一个字符（只适用于块级元素）

p:first-letter {} /*IE6下，选择器与花括号间必须有空白符才有效*/

选择该元素的第一行（只适用于块级元素）

p:first-line {} /*IE6下，选择器与花括号间必须有空白符才有效*/

在元素内容前（元素内）添加指定内容（必须定义content属性）

p:before {}   /*IE6、IE7不支持*/

在元素内容后（元素内）添加指定内容（必须定义content属性）

p:after {}   /*IE6、IE7不支持*/

CSS3将伪元素选择器单个冒号（:）修改为双冒号（::），用于区别伪类选择器，并新增了两个个伪元素选择器（对于原先存在的选择器，单冒号依然有效）

(CSS3)选择该元素内的第一个字符

p::first-letter {}   /*IE6忽略一个冒号，变相的支持，IE7、IE8不支持*/

(CSS3)选择该元素的第一行

p::first-line {}   /*IE6忽略一个冒号，变相的支持，IE7、IE8不支持*/

(CSS3)在元素内容前（元素内）添加指定内容

p::before {}   /*IE6~IE8不支持*/

(CSS3)在元素内容后（元素内）添加指定内容

p::after {}   /*IE6~IE8不支持*/

(CSS3)在元素中被选择的文本上添加样式（只能定义被选中时的background-color，color及text-shadow）

p::selection {}   /*IE6~IE8不支持*/
p::-moz-selection {}   /*火狐要加前缀*/

(CSS3)控制表单输入框中占位符的外观（表单输入元素的placeholder属性）

::-ms-input-placeholder {}    /*IE6~IE9不支持*/
:-moz-placeholder {}   /*老火狐*/
::-moz-placeholder {}   /*新火狐*/
::-webkit-input-placeholder {}   /*webkit内核*/

六. 选择器分组

选择器分组不是一种选择器，而是将所有选择器组合起来书写的一种方式，这样CSS规则就会同时应用到逗号分隔的选择器上

使用逗号分隔选择器即可，并且可以将任意多个选择器分组在一起

.test , #name , p  {}

七. 总结

以下选择器可以在IE6+、Chrome、Firefox、Opera、Safari等浏览器放心使用

通配选择器  * { }
元素选择器  p { }
类选择器   .ab { }
ID选择器   #ab { } 
后代选择器  p a { }
a:link { }     只用在a上
a:visited { }  只用在a上
a:hover { }      只用在a上
a:active { }      只用在a上
p:first-letter { }   必须留空
p:first-line { }     必须留空