CSS选择器

一、基础选择器

ID选择器

# {}

一个页面中，ID是唯一的。
ID应以字母开头，接字母、数字、连接符（-）和下划线（_）。
#相当于属性选择器[id = ]。

类选择器

. {}

一个页面中，元素可以有多个类名，多个元素也可共用一个类名。
class命名参考ID。
.相当于属性选择器[class ~= ]。
区分.a.b和.a .b这两种写法，后者中间有空格：
- 前者表示选择同时拥有a和b类的元素，IE6-中被识别为.b；
- 后者表示选择拥有a类的元素的后代元素，该后代元素有b类。

元素选择器

{}

该选择器也被称为标签选择器、类型选择器。
当为*时，表示选取所有标签。

属性选择器

[] {}          /* 选取拥有属性的元素 */
[ = ] {}  /* 选取值为的元素 */
[ *= ] {} /* 选取值包含的元素 */
[ ~= ] {} /* 选取值包含的元素；必须与其他值以空格分隔 */
[ ^= ] {} /* 选取值以开头的元素 */
[ |= ] {} /* 选取值以开头的元素；必须与其他值以空格或连接符分隔 */
[ $= ] {} /* 选取值以结尾的元素 */

若含空格或特殊字符，应用引号包围。（建议始终用引号包围）
IE6-不支持属性选择器，IE7-8需要声明才能使用。

二、伪类选择器

: {}

锚伪类

a:link    /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover   /* 鼠标悬停在链接上 */
a:active  /* 活动链接 */

这4个伪类可用于其他元素，但一般用于a元素。
:hover放在:link和:visited后才生效，:active放在:hover后才生效。
IE6-中:hover和:active只能用于a元素。
可能的情况：IE8-10点击嵌套元素时不触发:active，IE10在MS触摸板上不触发:active；IE6-和Opear12-下:visited有安全问题。

子元素伪类

:first-child         /* 是其父元素的第一个子元素 */
:last-child          /* 是其父元素的最后一个子元素 */
:only-child          /* 是其父元素的唯一一个子元素 */
:nth-child()       /* 是其父元素的第m个子元素 */
:nth-last-child() /* 是其父元素的倒数第m个子元素 */

可以是数字，也可以是公式（如2n+1，n从0开始），也可以是关键字odd（奇数）和even（偶数）；不能为负值。
除了first-child外都是CSS3伪类，因此IE8-不支持。
IE6-不支持first-child。
可能的情况：IE8在不聚焦时才能正确识别:first-child，IE7无法识别动态添加的first-child。

特定类型伪类

:first-of-type          /* 父元素中第一个类型是的子元素 */
:last-of-type           /* 父元素中最后一个类型是的子元素 */
:only-of-type           /* 父元素中唯一一个类型是的子元素 */
:nth-of-type()       /* 父元素中第个类型是的子元素 */
:nth-last-of-type()  /* 父元素中倒数第个类型是的子元素 */

取值参考nth-child。
都是CSS3伪类，因此IE8-不支持。

特定类型伪类和子元素伪类的区别：


   h1:first-child和h1:first-of-type均可选中此元素 
   p:first-child无法选中此元素，但p:first-of-type可以

状态伪类

:enabled  /* 元素可用 */
:disabled /* 元素被禁用 */
:checked  /* 元素被选中 */

都是CSS3伪类，因此IE8-不支持。
一般用于拥有disabled和checked属性的表单元素。

其他不常用伪类

:focus             /* 元素获得焦点 */
:empty             /* 元素没有子节点 */
:root              /* 根元素 */
:target            /* 当前活动的锚点目标 */
:not() /* 以外的元素 */
:lang()  /* 元素lang属性值为 */

除了:focus以外，都是CSS3伪类，因此IE8-不支持。
IE7-不支持:focus。

三、伪元素选择器

:: {}

CSS3中规定伪元素用::表示，但CSS2-中依然用:表示；
为了兼容性，除了CSS3新增的伪元素选择器（如::selector）外，目前仍用:表示。

首字母与首行

::first-letter /* 元素中的文本首字母 */
::first-line /* 元素中的文本首行 */

必须为块级元素。
::first-letter可以应用的CSS属性：
- 文本：font、color、vertical-align（不浮动）、text-decoration、text-transform、line-height。
- 盒模型：background、margin、padding、border。
- 浮动：float、clear。
::first-line可以应用的CSS属性：
- 文本：font、color、vertical-align、text-decoration、text-transform、line-height、word-spacing、letter-spacing。
- 盒模型：background。
- 浮动：clear。
::first-letter可能的情况：Chrome和Safari在添加文本时丢弃第一个"T"，Opera在动态测试时漏掉第二个和后续句子中的"T"。

插入新内容

::before {content:;} /* 在元素前插入text */
::after {content:;}  /* 在元素后插入text */

IE7-不支持，IE8需要声明。
这个伪元素是行内元素，可以使用display属性改变。
一般与content属性结合使用；content属性用来指定要插入的内容。
常用于清除浮动。

选中

::selection /* 元素中被用户选中的内容 */
::-moz-selection /* Firefox专用 */

这是CSS3的伪元素，必须用::表示，且IE8-不支持。
可以应用的CSS属性：color、background、cursor、outline。

四、组合选择器

后代选择器和子选择器

  ... {}   /* 后代选择器 */
 >  ... {} /* 子选择器 */

后代选择器又被称为包含选择器，用空格分隔，表示选取的所有后代元素，依此类推。
子选择器用>分隔，表示选取的所有子元素，依此类推。

后代选择器和子选择器的区别：


  样式 div i{} 和 div>i{} 均能应用
  
    样式 div>i{} 无法应用，但 div i{} 可以

兄弟选择器

+ {} /* 相邻兄弟选择器 */ ~ {} /* 普通兄弟选择器 */

相邻兄弟选择器用+分隔，表示选取后紧跟的第一个同级元素。

普通兄弟选择器用~分隔，表示选取后的所有同级元素。

注意：HTML里元素必然在元素之后，两者拥有同一个父元素。

选择器组合

所有选择器都可以组合使用

示例：
p.cls a[href^="http"] {...} #div1:first-child ul + ol {...}

五、优先级与层叠

分类

a类（假设权重为1000）：内嵌样式

b类（假设权重为100）：ID选择器

c类（假设权重为10）：类选择器，伪类选择器，属性选择器

d类（假设权重为1）：标签选择器，伪元素选择器

优先级

权重大的样式优先级高；组合选择器的权重叠加计算。

用!important修饰的CSS样式优先级最高，但是不建议这么使用。

层叠

属性不同时，各属性都被应用；

属性相同时，优先级高的属性覆盖优先级低的；

如果优先级也相同，则采取就近原则，后面的属性覆盖前面的。

示例

假设有CSS样式：
#example {color:blue; font-size:14px;} #example ul.list li {color:red; font-size:2em;} li {color:yellow!important;}

表现：li元素的文本颜色为yellow，字号为2em。

思路：最后一条样式有!important，因此最优先；然后计算权重（见下表），第二条样式权重最大，因此优先级第二。

选择器 a类个数 b类个数 c类个数 d类个数权重

#example 0 1 0 0 100

#example ul.list li 0 1 1 2 112

li 0 0 0 1 1

选择器的兼容性参考这里