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"?

---

© 2011 幸福收藏夹。 版权所有，转载务必注明。域名已经更新为：sofish.de。
注意：当你觉得某篇文章有用，请直接看原文，因为通常我都会在写了文章后更新、去错别字、升级观点之类的。