$E
> F这个新出现的选择器语法能够让我们基于子元素(
F
)来给父元素($E
)制定样式。下面是一个例子:/* 将应用中LI元素上的样式 */
ul > $li > p { border: 1px solid #ccc; }在上面的例子中,样式将应用中LI元素上,而不是
P
元素上!这是一个非常有用的新功能,希望最终能保留并实现出来!这种CSS选择器可能会带来一点点让人困惑的地方,比如下面的例子:$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中新的功能和特征有用吗?