W3ctech

最新的CSS选择器4级工作草案于2011年9月29日被发布。 新增了很多伪类。 总体来说，可以把新增的分为9类。 下面我们就逐类来研究一下。

1。复合选择
复合选择现在支持否定（Negation）和任何相匹配（Matches-any）的伪类选择。 复合选择，使我们能够通过组选择元素。

在下面的例子。 前两个列表项将是红色的，其余的将是绿色的。

<style>

li:not(.a, .b) {color:green;}

li:matches(.a, .b) {color:red;}

</style>

<ul>

<li class="a">hullo</li>

<li class="b">hullo</li>

<li>hullo</li>

<li>hullo</li>

<li>hullo</li>

</ul>

2。本地链接伪类
:local-link伪类 允许作者在网站上根据用户当前位置选择链接。

如果网页的网址是 http://www.example.com/2011/03/, 链接1收到样式2。链接2会收到样式2和3。

<style>

a:local-link {color:red;}

a:local-link(0) {font-family:Arial;}

a:local-link(1) {font-size:12px;}

</style>

<a href="http://www.example.com">Home</a>

<a href="http://www.example.com/2011">2011</a>

3。':nth-match()'伪类
The :nth-match(an+b of selector-list)伪类符号代表一个元素的an+b-1的兄弟姐妹匹配在它之前的文档树中的选择列表的任何零或正整数n值。

下面的例子中，每一个奇数行的div都会是#ccc色。

<style>

div:nth-match(2n+1) {background-color:#ccc;} /* represents every odd row of div */

div:nth-match(odd)  {background-color:#ccc;} /* same */

</style>

4。网格结构伪类
网格结构伪类是用于二维网格，如表。 以下模式：

下面的例子使C，E和G背景显示为黄色。

<style>

:column(col.selected) { background: yellow; }

</style>

<table>

  <col span="2"></col>

  <col class="selected">

      <tr>

          <td>A </td>

          <td>B </td>

          <td>C

              <tr>

                  <td span="2">D </td>

                  <td>E

                      <tr>

                          <td>F </td>

                          <td span="2">G</td>

                      </tr>

                  </td>

              </tr>

          </td>

      </tr>

  </col>

</table>

5。参考组合子

下面的例子中input的编号被label的属性for参照

<style>

label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */

label:matches(:hover, :focus):not([for]) input { /* association by containment */

box-shadow: yellow 0 0 10px; }

</style>

<label for="phone">Phone Number</label>

<input type="input" name="phone_number" id="phone" />

6。确定一个选择的对象
我们大家都熟悉的模式 E > F (CSS Selectors Level 2) 选择F元素为E元素的子元素. 也有办法反过来选。

所以通过利用$E > F，我们可以选择F元素的父类E.

<style>

$section #menu {border:1px solid red;}

</style>

<section>

<div id="menu"></div>

</section>

7。时间维伪类
时间维（Time-dimensional）伪类是新推出的一组类用来通过当前显示时间点对元素进行分类，在时间维的canvas上，如在讲话时显示的HTML文档。

比如，以下规则会突出任何正在读的段落或列表项：

<style>

:current(p, li, dt, dd) {

background: yellow;

}

</style>

8。不确定值（indeterminate-value）伪类 ':indeterminate'
The :indeterminate 伪类适用于其价值处于不确定状态的UI元素。 例如，radio和复选框元素可以在被选中和非选中状态之间切换， 但有时处于不确定状态, 既不被选中，也不取消选中. 同样，一个进度表，可以在一个不确定的状态完成时，是未知的。
如同:checked伪类， :indeterminate适用于所有的媒体。 例如， 一个radio-group的组件初始化时没有预先选定的选择, 即使在静态展示时，也会是 :indeterminate。

9. 属性选择: 区分大小写
属性选择可能包括标识符i近跟在右括号内(]). 当这个标志存在, 浏览器必须在ASCII范围内匹配属性值的大小写。

下面是一个使用例子:

<style>

[frame=hsides i] { border-style: solid none; }

</style>

结论
还有草案中的错误，辩论和不完整的信息，如果您想加入讨论，可以加入公开的邮件列表，在 www-style@w3.org.
The latest spec is at: http://www.w3.org/TR/2011/WD-selectors4-20110929/#overview