CSS选择器

一、基础选择器

ID选择器

#<id> {}

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

类选择器

.<class> {}

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

元素选择器

<tag> {}

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

属性选择器

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

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

二、伪类选择器

<selector>:<pseudo-class> {}

锚伪类

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有安全问题。

子元素伪类

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

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

特定类型伪类

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

• <m>取值参考nth-child。
• 都是CSS3伪类，因此IE8-不支持。
• 特定类型伪类和子元素伪类的区别：

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

状态伪类

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

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

其他不常用伪类

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

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

三、伪元素选择器

<selector>::<pseudo-element> {}

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

首字母与首行

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

• <selector>必须为块级元素。
• ::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"。

插入新内容

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

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

选中

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

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

四、组合选择器

后代选择器和子选择器

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

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

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

兄弟选择器

<selector1> + <selector2> {}  /* 相邻兄弟选择器 */
<selector1> ~ <selector2> {}  /* 普通兄弟选择器 */

• 相邻兄弟选择器用+分隔，表示选取<selector1>后紧跟的第一个同级元素<selector2>。
• 普通兄弟选择器用~分隔，表示选取<selector1>后的所有同级元素<selector2>。
• 注意：HTML里<selector2>元素必然在<selector1>元素之后，两者拥有同一个父元素。

选择器组合

• 所有选择器都可以组合使用
• 示例：

  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

选择器的兼容性参考这里