CSS4 选择器
CSS3 还没完全用上，CSS4 已经提上日程。官方发布了 update to the working Selectors Level 4 spec，对选择器做了一些升级。前端最大的优点就是技术更新快，可以经常学到新东西；最大的缺点也是技术更新快，要跟上潮流还真不是那么简单。不过，这次更新有像“父选择器”这样让人兴奋的内容，让我们先睹为快，了解一下吧：
一、父元素 $E > F
CSS 终于有了与 DOM 一样的父选择器。这个选择器将会把样式显示在包含有 F 的 $E 上。用 $ 符表示父选择器：
/* 样式显示在 li 上 */
$li > p { border: 1px solid #ccc; }
/* 样式显示在 ol 上 */
#wrapper > $ol > li { background:#f8f8f8; }
二、ID匹配 E /foo/ F
用双斜杆（//）包含 HTML 属性名。 E /foo/ F 表示选中的所有页面中所有 F 里 ID 值与 E 元素的 foo 属性值相等的。
<!-- 我们写一个 tab 的时候通常使用这样的情况 -->
<ul>
<li targetID="tab1">trigger1</li>
<li targetID="tab2">trigger2</li>
</ul>
<div>
<p id="tab1">tab1 content</p>
<p id="tab2">tab2 content</p>
</div>
/* 样式应用与当前 :hover 所在的 li 的 target ID 属性值相等的 p 上 */
li:hover /targetID/ p { border:2px solid #609060; }
三、匹配 :matches
div:matches(s1, s2) 所有div 匹配 s1 和 s2 的时候，这个 div 应用样式。比如我们想在 label 在 hover 状态的时候，所对应有 input 边框变成紫色(#609060)，可以这样写：
label:matches(:hover, :focus) /for/ input{ border:1px solid #609060; }
有一点值得注意的是，只有 compound selectors 可以应用于 :matches() ，它自己不能嵌套自己，所以像 :not(): :matches(:matches(...)) 和 :not(:matches(...)) 都是不合法的。更多»
四、链接相关 :any-link & :local-link
:any-link 匹配任何链接，:local-link 匹配任何本地链接。:local-link(n) 可以加参数，n 表示链接 path/ (目录的级数)，从序数 0 起算。官方文档描述得不是很清楚。像 a 和 :any-link 其实是一样的，而 div:any-link 呢？应该是拥有 src / href 值的 div 被选中。:local-link 看起来更有用。
/* 匹配所有与页面域名相同的链接，这样所有内部链接都会变成紫色的，而外部链接都是红色 */
a{color:#f30;}
a:local-link{ color:#609060; }
/* 匹配所有具有 2 级目录的内部链接:
* 如：http://sofish.de/path1/path2/
*/
a:local-link(2) { color:#080; }
五、状态 :current & :pass & :future
状态选择器描述太不清楚了。是指一切在时间线内的东西。可以看一下这篇吐槽，说是在 twitter 等的回复都说对这个规范都是完全不知所言。按理来说，应该是在页面的有时间线的 canvas, video, audio, 屏幕阅读等的内容上应用样式：
/* 时间线内当前被处理（选中）的元素，如果是 p 或者 li 背景变成浅黄色 */
:current(p, li){ background:#ffc; }
:pass 表示时间线上的前一个元素，如果不在时间线内，则指其前一个元素（相当于 DOM 的 prevSibling）。
:future 表示时间线上的后一个元素，如果不在时间线内，则指其后一个元素（相当于 DOM 的 nextSibling）。
六、方向 :dir
根据 HTML 属性选中。比如选中 <p dir="rtl"> ，如代码：
p:dir(rtl){ color:#888; }
七、默认选项 :default
选中多个子元素中的默认元素。比如 select 中的默认 option，允许有多个 :default。比如在允许多选的 select 中，有多个 :default 元素。
option:default { background:#ffc; }
八、表单限制 :required & ：optional
表单项中必处理项与可选项。记不记得 HTML5 中的 required 属性？！说的就是这个。
input:required { color:#f30; }
九、可读可写 :read-write & :read-only
大部分元素都是可读不可写的，所以都是 :read-only；像 text input 这些值可以改变的，和 HTML5 中设置了 contenteditable 的元素其本身是可改变的，这些被认为是具有写属性的，所以是 :read-write
:read-write { font-family: Georgia; }
十、:vaild & :invaild / :in-range & ：out-of-range
官方文档表示写得很不容易懂。数据和范围，估计都说是 [XFORMS10] 和 [HTML5] 中的一些内容。
总结：
好吧，这就是 CSS4 选择器更新的内容。或许还有些遗漏我没发现的。表示对于父选择器和匹配选择器都很期待。而对于一些规范描述不太清楚的，大家可以先了解了解就可以了。毕竟还只是预览版。
参考文献：
Selectors Level 4 – W3C Working Draft 29 September 2011
CSS4 Preview – Selectors
[selectors4] "time-dimensional canvas"?