CSS4新的选择器介绍

    CSS也许是Web设计者和程序员之间一种最佳的沟通工具，所以，对于CSS的革新发展，每个人都会感到兴奋。W3C在其网站上公布了正在 制定中的CSS4选择器(selector)规范，你会发现里面出现了很多新的东西。下面让我们来看看对于未来的浏览器，CSS4提供了哪些CSS选择器上的新功能和新特征！

$E > F

这个新出现的选择器语法能够让我们基于子元素(F)来给父元素($E)制定样式。下面是一个例子：

$ol > li:only-child {
    list-style-type: none;
}

上面例子中的样式将会作用在只有一个 LI子元素的 OL元素上。不知道将来Web程序员对$语法使用能不能习惯；很有用的东西往往会被误用。

链接地址伪类 – :any-link 和 :local-link

这些伪类将会用在表示链接地址的元素上。其中 :any-link伪类用于所有链接，而 :local-link用于站内链接(相对于外部链接)。
如果你想标注一下页面上的所有外部链接，可以这样：

/* 内部链接 */
#sidebar a:local-link {

	background: url(internal.png) 0 0 no-repeat;

}

另外一个背景表示所有外部链接：

/* 外部链接 */
:not(:local-link) {

	background: url(external.png) 0 0 no-repeat;

}

这些伪类是非常有用的补充，有些网站上对外部链接和内部链接给出明确指示是非常常见的。

语言相关伪类 – :dir

这个 :dir伪类用来区分文本是从左到右显示还是从右到左显示：

p:dir(ltr) { /* 从左到右(left to right) */

}

div:dir(rtl) { /* 从右到左(right to left) */

}

这也是一个非常有益的补充，特别是要支持多语言的网站，这是非常方便而且必要的支持。

元素引用组合选择器

这个新出现的元素引用组合选择器非常有趣，它能将两个元素通过选择器关联起来。两个正斜杠之间的是 CSS保留字。下面是一个例子

label:matches(:hover, :focus) /for/ input {

	box-shadow: #fffea1 0 0 8px

}

上面的例子中，当LABEL元素称为焦点或有鼠标悬停时，相关的INPUT元素将会被高亮显示；而究竟是相关到哪个INPUT元素，这需要根据LABEL元素的for属性决定。你也许已经明白，LABEL元素的for属性里存放的应该是id。
这些新功能有价值吗？
我非常喜欢这个新的$语法，以及新的链接区分:-link功能，对于多语言网站，:dir的确有很大用处。而新出现的元素引用组合选择器非常有意思，关键是出现了新的反斜杠语法。你觉得这些CSS4中新的功能和特征有用吗？

转载自-jquery插件库