CSS3 选择器（Selector）

 

写过 CSS 的人应该对 CSS 选择器不陌生，我们所定义的 CSS 属性之所以能应用到相应的节点上，就是因为 CSS 选择器模式。参考下述代码：

清单 1. CSS 选择器案例

 Body > .mainTabContainer  div  > span[5]{ 
 Border: 1px solod red; 
 Background-color: white; 
 Cursor: pointer; 
 }

此处的 CSS 选择器即：“body > .mainTabContainer div span[5]” 代表这这样一条路径：

1. “body”标签直接子元素里 class 属性值为“mainTabContainer”的所有元素 A

2. A 的后代元素（descendant）里标签为 div 的所有元素 B

3. B 的直接子元素中的第 5 个标签为 span 的元素 C

这个 C 元素（可能为多个）即为选择器定位到的元素，如上的 CSS 属性也会全部应用到 C 元素上。

以上为 CSS2 及之前版本所提供的主要定位方式。现在，CSS3 提供了更多更加方便快捷的选择器：

清单 2. CSS3 选择器案例

 Body > .mainTabContainer  tbody:nth-child(even){ 
 Background-color: white; 
 } 

 Body > .mainTabContainer  tr:nth-child(odd){ 
 Background-color: black; 
 } 


 :not(.textinput){ 
 Font-size: 12px; 
      } 

      Div:first-child{ 
      Border-color: red; 
      }

如上所示，我们列举了一些 CSS3 的选择器，在我们日常的开发中可能会经常用到，这些新的 CSS3 特性解决了很多我们之前需要用 JavaScript 脚本才能解决的问题。

tbody: nth-child(even), nth-child(odd)：此处他们分别代表了表格（tbody）下面的偶数行和奇数行（tr），这种样式非常适用于表格，让人能非常清楚的看到表格的行与行之间的差别，让用户易于浏览。

: not(.textinput)：这里即表示所有 class 不是“textinput”的节点。

div:first-child：这里表示所有 div 节点下面的第一个直接子节点。

除此之外，还有很多新添加的选择器：

 E:nth-last-child(n) 
 E:nth-of-type(n) 
 E:nth-last-of-type(n) 
 E:last-child 
 E:first-of-type 
 E:only-child 
 E:only-of-type 
 E:empty 
 E:checked 
 E:enabled 
 E:disabled 
 E::selection 
 E:not(s)