css选择器选择3和4_CSS4预览–选择器

css选择器选择3和4

CSS is one probably the best bridge between web designers and developers so updates to the CSS spec are very exciting. The W3C recently posted an update to the working Selectors Level 4 spec, and there are many useful updates to be found. Let's have a look at what new CSS selectors and features will be available to us in future browsers!

CSS可能是Web设计人员和开发人员之间最好的桥梁，因此CSS规范的更新非常令人兴奋。 W3C最近发布了对工作的Selectors Level 4规范的更新 ，并且有很多有用的更新。 让我们看一下将来的浏览器中可以使用哪些新CSS选择器和功能！

$E > F ($E > F)

This exciting selector syntax allows for styling of a parent element ($E) based on its child element (F). One example would be:

这种激动人心的选择器语法允许根据子元素( F )设置父元素( $E )的样式。 一个例子是：

/* style the LI element */
ul > $li > p { border: 1px solid #ccc; }

In the case above, the LI element is styled, not the P element! This is a much needed improvement to CSS and we will finally have it! This selector does leave room for confusion; consider the following:

在上述情况下，将设置LI元素的样式，而不是P元素的样式！ 这是CSS急需的改进，我们最终将得到它！ 该选择器确实留出了混淆的空间； 考虑以下：

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

The example above styles an OL element with a unique LI child element. It will be interesting to see how often developers use the $ syntax; hugely useful but potential for misuse.

上面的示例使用唯一的LI子元素设置OL元素的样式。 看看开发人员使用$语法的频率会很有趣。 非常有用，但有可能被滥用。

位置伪类- :any-link和:local-link (Location Pseudo-Classes - :any-link and :local-link)

These pseudo-classes will be used for location-based elements. The :any-link pseudo-class is used for general links, while :local-link is used to identify links targeted within the same host (as opposed to external href's).

这些伪类将用于基于位置的元素。 :any-link伪类用于常规链接，而:local-link用于标识在同一主机(与外部href相对)中定位的链接。

To add an icon to all internal links within your sidebar:

要将图标添加到侧边栏中的所有内部链接中：

#sidebar a:local-link {
	background: url(internal.png) 0 0 no-repeat;
}

To add another icon to all external links:

要将另一个图标添加到所有外部链接：

:not(:local-link) {
	background: url(external.png) 0 0 no-repeat;
}

These pseudo-classes are welcomed additions, as link styling and communicating location is very important.

这些伪类是受欢迎的补充，因为链接样式和通信位置非常重要。

语言伪类- :dir (Linguistic Pseudo-Class - :dir)

The :dir pseudo-class identifies left-to-right or right-to-left text displays:

:dir伪类标识从左到右或从右到左的文本显示：

p:dir(ltr) { /* left to right */
	
}

div:dir(rtl) { /* right to left */

}

Another welcomed addition, especially for those who code for multiple languages.

另一个受欢迎的补充，特别是对于使用多种语言编写代码的人。

参考组合器 (Reference Combinators)

Reference combinators introduce slashes to the fun, mapping out association between compound selectors. Between the slashes are CSS qualified names. Here's an example:

参考组合器将斜杠引入了乐趣，并绘制出了复合选择器之间的关联。 在斜线之间是CSS限定名称 。 这是一个例子：

label:matches(:hover, :focus) /for/ input {
	box-shadow: #fffea1 0 0 8px
}

The example above highlights an INPUT element when its LABEL is focused or hovered-over; the association is made by the for attribute of the label. As you can probably tell, the id is implied by the LABEL element's for attribute.

上面的示例突出显示了当LABEL聚焦或悬停时的INPUT元素。 关联是通过标签的for属性建立的。 如您所知，该id由LABEL元素的for属性隐含。

够好了？ (Good Enough?)

I'm very encouraged by the new $ syntax and the new location :-link functionalities, and the language-based improvements will surely be helpful to some. I find the new reference combinator interesting, mostly because of the incorporation of the slash syntax. What do you think of these new features? What would you like to see added?

新的$语法和新的位置:-link功能使我感到非常鼓舞，基于语言的改进肯定会对某些人有所帮助。 我发现新的引用组合器很有趣，主要是因为合并了斜杠语法。 您如何看待这些新功能？ 您想添加什么？

翻译自: https://davidwalsh.name/css4-preview

css选择器选择3和4