CSS4 选择器

在小鱼博客里看到一篇关于CSS4选择器的文章，着实让人振奋，于是仔细阅读了 W3C CSS4 官方文档 在小鱼文章的基础上按照自己的理解总结出这么一篇文章；因为目前CSS4文档还是预览版，对一些选择器的解释不够清晰难以理解，所以难免有遗漏和错误，如有发现欢迎指正或一起讨论:)

1.父元素选择器： $E > F
通过父元素选择器，可将样式应用在指定元素的父元素上，例如：
/* 将样式应用在 p 的父元素 li 上 */
$li > p { border: 1px solid #ccc; }

/* 将样式应用在 li 的父元素 ol 上 */
#wrapper > $ol > li { background:#f8f8f8; }

2.ID匹配 E /foo/ F
foo 为 HTML 属性名。 E /foo/ F 表示匹配 F 元素里 ID 值与 E 元素的 foo 属性值相同的元素。

<!-- HTML 代码 -->
<ul>
    <li data-ID="tab1">trigger1</li>
    <li data-ID="tab2">trigger2</li>
</ul>
<div>
    <p id="tab1">tab1 content</p>
    <p id="tab2">tab2 content</p>
</div>
/* CSS代码 */
/* 当li处在:hover状态时，拥有 id 且与 li 的 data-ID 属性值相同的 p 元素应用样式 */
li:hover /data-ID/ p { border:2px solid #609060; }

3.匹配伪类 E:matches()
匹配伪类语法为div:matches(s1, s2)，表示当div匹配 s1 或 s2 时应用样式，例如：
/*当 label 的状态为 hover 或 focus 时，改变其子元素 input 边框颜色*/
label:matches(:hover, :focus) input{ border:1px solid #ff6600; }
注意：只有 compound selectors 可以应用于 :matches() ，它自己不能嵌套自己，所以像 :not(): :matches(:matches(…)) 和 :not(:matches(…)) 都是不合法的。W3C解释»

4.否定伪类 E:not()
E:not()在CSS3中就有：button:not([DISABLED])，在CSS4中增加了E:not(s1,s2)语法，表示E不匹配 s1 或 s2 时应用样式，例子与E:matches()类似。
注意：伪元素不能应用否定伪类

5.本地链接伪类 E:local-link
该伪类多应用于a标签上，并且可以增加一个数字参数 a:local-link(n)，n表示匹配目录的级数(path/)，序数从 0 开始，例子：

<!-- HTML代码 -->
<a href="http://www.example.com">link1</a>
<a href="http://www.example.com/2011">link2</a>
<a href="https://www.example.com/2011/10">link3</a>
<a href="http://www.example.com/2011/10/09">link4</a>
<a href="http://example.com/2011/03">link5</a>

/* CSS代码 */
a:local-link { color:black;}
a:local-link(0) { color:blue;}
a:local-link(1) { color:grey;}
a:local-link(2) { color:orange;}
a:local-link(3) { color:YellowGreen;}

如果文档的URL为https://www.example.com，那么CSS最后实现的颜色为：
link1 没有目录级数，匹配 a:local-link(0) { color:blue;}
link2 一级目录，匹配a:local-link(0)，a:local-link(1) 注意：样式被a:local-link(1)覆盖。
link3 二级目录，匹配a:local-link(0)，a:local-link(1)，a:local-link(2)
link4 三级目录，匹配a:local-link(0)，a:local-link(1)，a:local-link(2)，a:local-link(3)
link5 因域名不同所以没有匹配样式。

6.默认选项伪类 :default
选中多个子元素中的默认元素。比如 select 中的默认 option，允许有多个 :default。比如在允许多选的 select 中，有多个 :default 元素。

option:default { background:#ffc; }

7.表单限制伪类 :required、：optional
匹配表单项中必选项与可选项。

input:required { color:#f30; }

8.可读可写伪类 :read-write、:read-only
大部分元素都是可读不可写的，所以都是 :read-only；像 text input 这些值可以改变的，和 HTML5 中设置了 contenteditable 的元素其本身是可改变的，这些被认为是具有写属性的，所以是 :read-write

:read-write { font-family: Georgia; }

9.尚不明确的选择器
状态伪类 :current、:pass、:future
状态选择器目前定义不明。是指一切在时间线内的东西。可以看一下这篇吐槽，说是在 twitter 等的回复都说对这个规范都是完全不知所言。按理来说，应该是在页面的有时间线的 canvas, video, audio, 屏幕阅读等的内容上应用样式：

/* 时间线内当前被处理（选中）的元素，如果是 p 或者 li 背景变成浅黄色 */
:current(p, li){ background:#ffc; }

:pass 表示时间线上的前一个元素，如果不在时间线内，则指其前一个元素（相当于 DOM 的 prevSibling）。
:future 表示时间线上的后一个元素，如果不在时间线内，则指其后一个元素（相当于 DOM 的 nextSibling）。
:vaild、:invaild / :in-range、:out-of-range
官方文档表示写得很不容易懂。数据和范围，估计都说是 [XFORMS10] 和 [HTML5] 中的一些内容。

参考文章：
Selectors Level 4 – W3C Working Draft 29 September 2011
CSS4 Preview – Selectors
[selectors4] “time-dimensional canvas”?
CSS4 选择器