css选择器 选择父级_下一代CSS选择器：第4级

css选择器 选择父级

Back in January 2014 I wrote the article The Current Generation of CSS3 Selectors. The goal of that article was to introduce the new generation of selectors that often fell under the “CSS3” umbrella. Thabet group of selectors has been well documented in a lot of places, and browser support for those features is quite strong (all browsers including IE9+).

早在2014年1月，我写了文章The Current Generation of CSS3 Selectors 。 该文章的目的是介绍通常属于“ CSS3”框架的新一代选择器。 Thabet选择器组在很多地方都有据可查，并且浏览器对这些功能的支持非常强(所有浏览器，包括IE9 +)。

The future of CSS selectors is also looking bright, with the Selectors Level 4 specification currently in Working Draft status, and an Editor’s Draft of the same spec still in progress (the editor’s draft is generally viewed as more authoritative).

CSS选择器的前景也一片光明， 选择器4级规范当前处于“工作草稿”状态，并且同一规范的“ 编辑者的草稿”仍在进行中(通常认为编辑者的草稿更具权威性)。

This article will focus on the new selectors not discussed in my previous article. Browser support for many of these is pretty poor, so I don’t recommend using many of these in production. View this post as a peek into what’s to come when the spec is further along and browsers start their implementations. I’ve included demos for those that have support.

本文将重点介绍我上一篇文章中未讨论的新选择器。 浏览器对其中许多功能的支持非常差，因此，我不建议在生产环境中使用许多功能。 查看此文章，以了解规格进一步发展以及浏览器开始实施时的情况。 我已经为那些有支持的人提供了演示。

:read-only和:read-write (:read-only and :read-write)

These selectors are pretty straightforward. Any element that’s editable by the user is in the “read-write” state. Otherwise, the element is in the “read-only” state.

这些选择器非常简单。 用户可编辑的任何元素都处于“读写”状态。 否则，该元素处于“只读”状态。

Take the following HTML:

使用以下HTML：

<input type="text" readonly>
<input type="text" disabled>
<input type="text">
<div contenteditable></div>

Now consider this CSS:

现在考虑以下CSS：

:read-only {
  outline: solid 1px blue;
}

:read-write {
  outline: solid 1px red;
}

Here’s a breakdown of what this CSS does in relation to the HTML:

以下是此CSS与HTML相关的功能细分：

• The first two elements will have a blue outline because they are set to “readonly” and “disabled” in the HTML, respectively.
  前两个元素将具有蓝色轮廓，因为它们在HTML中分别设置为“只读”和“禁用”。

• The third element will have a red outline because it’s naturally editable (“read-write”), as are all inputs by default. A textarea would be the same.

  第三个元素将具有红色轮廓，因为它是自然可编辑的(“读写”)，默认情况下也是所有输入。 一个textarea将是相同的。

• The last element (the div) will have a red outline because of the contenteditable attribute.

  由于contenteditable属性，最后一个元素( div )将具有红色轮廓。

In the CSS I’m using these selectors universally (i.e. without applying them to any elements). This means the red outline would be applied to all divs, spans, and other naturally uneditable elements. It’s more likely that this would be used on specific form elements or elements with a class applied, to be more specific.

在CSS中，我普遍使用这些选择器(即，不将它们应用于任何元素)。 这意味着红色轮廓线将应用于所有div，span和其他自然不可编辑的元素。 更可能是将其用于特定的表单元素或应用了类的元素，更具体地讲。

The :read-write pseudo-class is listed as “at-risk” in the Editor’s Draft, so it may be removed.

:read-write伪类在编辑草稿中被列为“有风险”，因此可以将其删除。

Browser Support for :read-only and :read-write Chrome, Opera, Firefox, Safari.

浏览器支持：read-only和：read-write Chrome，Opera，Firefox，Safari。

Note: As shown in the demo below, the browsers that support these selectors identify the “disabled” input as “read-write”, which is not correct, according to the spec.

注意：如以下演示中所示，支持这些选择器的浏览器根据规范将“禁用”输入标识为“读写”，这是不正确的。

See the Pen Demo for :read-only and :read-write by SitePoint (@SitePoint) on CodePen.

有关CodePen上的SitePoint ( @SitePoint )的：read-only和：read-write的信息 ，请参见Pen 演示 。

默认选项伪类:default (The Default-option Pseudo-class: :default)

The :default pseudo-class matches elements that qualify as “default” in relation to a set that they are part of. For example, a button element that’s the default submit button for a form or the default selected item in a set of radio buttons.

：default伪类匹配与其所属的集合有关的被视为“默认”的元素。 例如， button元素是表单的默认提交按钮或一组单选按钮中的默认选定项。

You can also have multiple defaults for a single group, as shown in this HTML snippet:

您也可以为单个组设置多个默认值，如以下HTML代码段所示：

<input type="checkbox" value ="f" name="group" checked> Fruits
<input type="checkbox" value ="v" name="group"> Vegetables
<input type="checkbox" value ="m" name="group" checked> Meats
<input type="checkbox" value ="p" name="group" checked> Poultry
<input type="checkbox" value ="n" name="group"> Nuts
<input type="checkbox" value ="b" name="group"> Breads

Now let’s pair the HTML above with the following CSS:

现在，让我们将上述HTML与以下CSS配对：

input[type=checkbox]:default {
  outline: solid 1px hotpink;
}

In this case, all the elements with the checked attribute present will be styled with the outline.

在这种情况下，所有具有checked属性的元素都将使用轮廓样式。

Browser Support for :default Chrome, Opera, Firefox, Safari.

浏览器支持：默认的 Chrome，Opera，Firefox，Safari。

As shown in the demo, WebKit/Blink browsers do not apply the outline to the “default” checkboxes, even though they should. This seems to be a bug. Firefox has the correct behavior.

如演示中所示，WebKit / Blink浏览器不会将大纲应用于“默认”复选框，即使应该也是如此 。 这似乎是一个错误。 Firefox的行为正确。

See the Pen Demo for :default by SitePoint (@SitePoint) on CodePen.

有关CodePen上SitePoint ( @SitePoint )的默认设置 ，请参见Pen 演示 。

有效性伪类:valid和:invalid (Validity Pseudo-classes: :valid and :invalid)

These pseudo-classes are useful in HTML forms for giving visual clues as to the validity of the data entered by the user, something that would normally be done with JavaScript.

这些伪类在HTML格式中很有用，可为用户输入的数据的有效性提供可视线索，这通常是用JavaScript完成的。

As an example, if your form has the following field:

例如，如果您的表单具有以下字段：

Email: <input type="email" required>

Notice the field expects the data entered to be a valid email address. You can then do the following:

请注意，该字段期望输入的数据是有效的电子邮件地址。 然后，您可以执行以下操作：

input[type=email]:invalid {
  outline: red solid 1px;
}

input[type=email]:valid {
  outline: lightgreen solid 1px;
}

With the above CSS, the email field will be styled with a red outline even before the user enters anything. Once the user types in a valid email address, the outline will turn green.

使用上述CSS，甚至在用户输入任何内容之前，电子邮件字段的样式都将显示为红色轮廓。 用户输入有效的电子邮件地址后，轮廓将变为绿色。

With these pseudo-classes you could easily add a pseudo-element in the form of a green checkmark (or something similar), to indicate valid field data.

使用这些伪类，您可以轻松地添加绿色复选标记(或类似形式)形式的伪元素，以指示有效的字段数据。

Some notes on these selectors:

这些选择器的一些注意事项：

• Interestingly, the validity can also apply to the form element itself, indicating if all the fields are valid.
  有趣的是，有效性也可以应用于表单元素本身，指示所有字段是否有效。

• These don’t work on common elements like div or p because those elements don’t have any way to specify expected data formats.

  这些元素不适用于div或p等常见元素，因为这些元素无法指定期望的数据格式。

• A regular “text” input type, which doesn’t require a specific format, is “valid” by default, but would be “invalid” without data if it has the required attribute set.

  不需要特定格式的常规“文本”输入类型默认情况下为“有效”，但如果设置了required属性，则在没有数据的情况下将为“无效”。

Browser Support for :valid and :invalid All browsers including IE10+.

：valid和：invalid的浏览器支持所有浏览器，包括IE10 +。

See the Pen Demo for :valid and :invalid by SitePoint (@SitePoint) on CodePen.

有关CodePen上SitePoint ( @SitePoint )的：valid和：invalid的信息 ，请参见Pen 演示 。

范围伪类：： :in-range和:out-of-range (Range Pseudo-classes: :in-range and :out-of-range)

These two pseudo-classes are useful for form elements that allow data that falls between a specified range. You can style the specified input based on whether or not the element is within the allowed range.

这两个伪类对于允许数据落入指定范围内的表单元素很有用。 您可以根据元素是否在允许范围内来设置指定输入​​的样式。

So your HTML would be something like this:

因此，您HTML将如下所示：

<input type="date" 
       min="1994-01-01" max="2015-03-01"
       value="1993-01-01">

Notice the default value of “1993-01-01”, which is outside the allowed date range. You can then style the input dynamically, based on the default data or any entered data, something like this:

请注意，默认值“ 1993-01-01”超出了允许的日期范围。 然后，您可以根据默认数据或任何输入的数据动态设置输入的样式，如下所示：

input[type=date]:in-range {
  outline: lightgreen solid 1px;
}

input[type=date]:out-of-range {
  outline: red solid 1px;
}

Some notes on these selectors:

这些选择器的一些注意事项：

• These can be used for number, datetime, datetime-local, month, week, and any other input types that allow ranges.

  这些可以用于number ， datetime ， datetime-local ， month ， week和允许范围的任何其他输入类型。

• Technically these also work with the range input type, but I don’t think there is a way to make such an element be “out of range” so the usefulness in this case seems limited.

  从技术上讲，它们也适用于range输入类型，但是我认为没有办法使这种元素“超出范围”，因此在这种情况下，其用途似乎有限。

• As with other pseudo-classes, these will work only on elements that have the capability to define accepted ranges.
  与其他伪类一样，它们仅对具有定义可接受范围的功能的元素起作用。

Browser Support for :in-range and out-of-range Opera, Chrome, Firefox, Safari.

浏览器支持：范围内和范围外的 Opera，Chrome，Firefox，Safari。

See the Pen Demo for :in-range and :out-of-range by SitePoint (@SitePoint) on CodePen.

有关CodePen上SitePoint ( @SitePoint )的：in-range和：out-of-range的信息 ，请参见Pen 演示 。

可选伪类:required和:optional (Optionality Pseudo-classes: :required and :optional)

These pseudo-classes let you style form elements based on whether they are required to be filled out or not. Take the following HTML:

这些伪类使您可以根据是否需要填写表单元素来设置表单元素的样式。 使用以下HTML：

<div>
  <label for="name">name:</label>
  <input type="text" id="name" required>
  <span class="msg"></span>
</div>
<div>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <span class="msg"></span>
</div>
<div>
  <label for="address">Address:</label>
  <input type="text" id="address">
  <span class="msg"></span>
</div>

Notice the empty span elements added next to each input. Also notice that the first two fields are required but the third is not. With this HTML in place, you can do the following in your CSS:

请注意，在每个输入旁边添加了空的span元素。 另请注意，前两个字段是必填字段，而第三个字段不是必需字段。 有了此HTML，您可以在CSS中执行以下操作：

input:required ~ .msg:after {
  content: '*';
  color: red;
}

input:optional ~ .msg:after {
  content: '(optional)';
}

Here I’m using the general sibling combinator to add a red asterisk next to each required field and I’m adding the word “optional” in parentheses beside each non-required field.

在这里，我使用通用的同级组合器在每个必填字段旁边添加一个红色星号，并在每个非必填字段旁边的括号中添加了“可选”一词。

This uses the extra elements that I added. If you prefer not to use extra elements, you can either add them dynamically with JavaScript or apply styling directly to the input itself. But note that you can’t use pseudo-elements with form inputs, so you’d have to apply a different kind of styling in that case.

这使用了我添加的额外元素。 如果您不想使用额外的元素，则可以使用JavaScript动态添加它们，也可以将样式直接应用于输入本身。 但是请注意，您不能将伪元素与表单输入一起使用，因此在这种情况下，您必须应用另一种样式。

Browser Support for :required and :optional All browsers.

对：required和：optional所有浏览器的浏览器支持 。

See the Pen Demo for :required and :optional by SitePoint (@SitePoint) on CodePen.

有关CodePen上SitePoint ( @SitePoint )的：required和：optional的信息 ，请参见Pen 演示 。

不区分大小写的属性选择器： i (Case-insensitive Attribute Selectors: i)

By default in CSS, attribute selectors are case sensitive. So, for example, if you select all elements with href values that end with “pdf”, it will not select href values that end with “PDF” (uppercase).

在CSS中，默认情况下，属性选择器区分大小写。 因此，例如，如果您选择所有具有以“ pdf”结尾的href值的元素，则不会选择以“ PDF”结尾的href值(大写)。

There’s a useful new flag that can be added to an attribute selector that overrides this behavior.

可以将一个有用的新标志添加到覆盖此行为的属性选择器。

a[href$="pdf" i] {
  color: red;
}

Now the attribute selector will select all href links pointing to PDF files, regardless of whether the .pdf extension is written in lowercase, uppercase, or even mixed case.

现在，属性选择器将选择所有指向PDF文件的href链接，而不管.pdf扩展名是小写，大写还是大小写混合。

Browser Support for case-insensitive attribute selectors: Opera (only available behind a flag; thanks to Šime Vidas for pointing this out).

浏览器支持不区分大小写的属性选择器： Opera(仅在标志后面可用；感谢ŠimeVidas指出了这一点)。

See the Pen Demo for case-insensitive attribute selectors by SitePoint (@SitePoint) on CodePen.

有关CodePen上SitePoint ( @SitePoint ) 不区分大小写的属性选择器 ，请参见Pen 演示 。

:blank伪类 (:blank Pseudo-class)

The :blank pseudo-class is kind of like the prettier cousin of :empty, which I discussed in the previous article. With :empty you can select an element based on there being no children in it, whether that be elements, text nodes, or even white space nodes. So with :empty, even if the element contains a single space and nothing else, it will not be considered “empty”.

：blank伪类有点像:empty的漂亮表亲，我在上一篇文章中讨论过。 使用:empty您可以基于其中没有子元素来选择元素，无论是元素，文本节点，甚至是空白节点。 因此，使用:empty ，即使元素包含一个空格且没有其他内容，也不会被视为“空”。

The :blank pseudo-class, however, will select an element as long as it has no text and no other child elements, regardless of white space. So it could contain white space, line breaks, etc., and it would still qualify.

但是， :blank伪类将选择一个元素，只要该元素没有文本且没有其他子元素，而与空白无关。 因此它可能包含空格，换行符等，并且仍然可以使用。

Here’s some example HTML:

这是一些示例HTML：

<p></p>

<p> </p>

Note that the first paragraph element is completely empty, but the second one has a single space character in it. Here’s the CSS:

请注意，第一个段落元素完全为空，但是第二个元素中只有一个空格字符。 这是CSS：

p:blank {
  outline: solid 1px red;
}

p:empty {
  border: solid 1px green;
}

In this case, I’m applying a red outline on “blank” elements and a green border on “empty” elements. The :empty pseudo-class will select only the first element, because it’s completely empty. But the :blank pseudo-class will apply to both, because they are both “blank” with respects to text and elements.

在这种情况下，我在“空白”元素上应用了红色轮廓，在“空”元素上应用了绿色边框。 :empty伪类将仅选择第一个元素，因为它完全为空。 但是:blank伪类将同时应用于这两者，因为它们在文本和元素方面都是“空白”的。

It might be hard to remember the difference, because the names sound too similar and this is something that is noted in an issue in the spec. So it’s possible that this selector will change names. As the spec also notes, there is an equivalent Mozilla-only version of this selector.

可能很难记住它们之间的差异，因为它们的名称听起来太相似了，这是规范中提到的问题 。 因此，此选择器可能会更改名称。 正如规范还指出的那样，此选择器具有等效的仅Mozilla版本。

Browser Support for :blank None.

浏览器对：blank的支持无。

匹配任何伪类:matches() (Matches-any Pseudo-class: :matches())

The :matches() pseudo-class is a way to make selector grouping more succinct, and should be a useful addition to the spec when browser support improves.

：matches()伪类是使选择器分组更简洁的一种方法，当浏览器支持改善时，它应该是对规范的有用补充。

In an example taken from MDN, you might have the following overly-verbose CSS, which attempts to deal with styling for main headings that are nested in various contexts:

在MDN的示例中 ，您可能具有以下过于冗长CSS，该CSS试图处理嵌套在各种上下文中的主要标题的样式：

section section h1, section article h1,
section aside h1, section nav h1,
article section h1, article article h1, 
article aside h1, article nav h1,
aside section h1, aside article h1,
aside aside h1, aside nav h1,
nav section h1, nav article h1, 
nav aside h1, nav nav h1, {
  font-size: 20px;
}

With :matches(), this can be simplified to:

使用:matches() ，可以简化为：

:matches(section, article, aside, nav)
:matches(section, article, aside, nav) h1 {
  font-size: 20px;
}

The simplified version can be interpreted as: “If the h1 is inside any of these four elements, which in turn is inside any of the same four elements, do the following.”

简化版本可以解释为：“如果h1在这四个元素中的任何一个之内， h1在这四个元素中的任何一个之内，请执行以下操作。”

Notes on :matches():

关于:matches()注释：

• It used to be :any in the spec, supported with -moz- and -webkit- prefixes.

  它在规范中曾经是:any ，并受-moz-和-webkit-前缀支持。

• As CSS-Tricks points out, the principle here is similar to selector nesting in preprocessors.

  正如CSS-Tricks所指出的 ，这里的原理类似于预处理器中的选择器嵌套。

• The selector argument must be a “simple selector” (i.e. it cannot be a pseudo-element and it can’t use a combinator other than descendant).
  选择器参数必须是一个“简单选择器”(即它不能是伪元素，并且不能使用除后代以外的组合器)。

Browser Support for :matches() None, however, WebKit/Blink and Mozilla have their own vendor-based equivalents.

浏览器对：matches()的支持没有，但是，WebKit / Blink和Mozilla具有自己的基于卖方的等效项。

关系伪类:has() (Relational Pseudo-class: :has())

The :has pseudo-class is similar to jQuery’s .has() but with some broader abilities. Examples will make clear what’s possible. Note the comments in the code, which explain what each example selects:

：has伪类与jQuery的.has()类似，但具有更广泛的功能。 实例将说明有什么可能。 请注意代码中的注释，这些注释解释了每个示例选择的内容：

/* Section elements that contain a footer */
section:has(footer) {
  background: #ccc;
}

/* Any element containing a p element with a class of "alert" */
:has(p.alert) {
  background-color: red;
}

/* img element with paragraph immediately following. */
img:has(+p) {
  color: red;
}

/* list item with ul as a direct child */
li:has(> ul) {
  color: red;
}

As you can see, the name “has” isn’t just another word for “contains” (which is how jQuery’s method works); it can also mean “has as immediate child”, “has specified element following it”, etc.

如您所见，名称“ has”不仅是“ contains”的另一个词(这是jQuery方法的工作方式)。 它也可以表示“具有直属子”，“具有紧随其后的指定元素”等。

Note: The :has pseudo-class is in the Editor’s Draft but not in the Working Draft. Also, as pointed out by Ralph in the comments, this selector may only be available in JavaScript (kind of like querySelectorAll), and not in CSS. See Dynamic vs Static Selector Profiles in the spec.

注意：： :has伪类在编辑器的草稿中，但不在工作草稿中。 另外，正如Ralph在评论中指出的那样，此选择器仅在JavaScript(类似于querySelectorAll )中可用，而在CSS中不可用。 请参阅规格中的动态选择器配置文件与静态选择器配置文件 。

Browser Support for :has() None.

浏览器对：has()的支持 。

超链接伪类:any-link (Hyperlink Pseudo-class: :any-link)

This selector works as a shortcut for styling any element that can take an href attribute. This includes a, area, and link elements. It can also be used as a general shortcut for the following:

此选择器用作样式化可以采用href属性的任何元素的快捷方式。 这包括a ， area ，和link元素。 它也可以用作以下内容的常规快捷方式：

:link, :visited {
  color: #555;
}

So instead of the above, you would write:

因此，您可以编写以下内容，而不是上面的内容：

:any-link {
  color: #555;
}

But, as mentioned, this would also cover other elements, not just anchors (a), so this selector’s usefulness might be tough to discern.

但是，如前所述，这还将涵盖其他元素，而不仅仅是锚点( a )，因此此选择器的用处可能很难辨别。

It should be noted that the Working Draft had a selector called :local-link, which has been removed in Editor’s.

应当指出，工作草案中有一个名为:local-link的选择器，已在编辑器中删除。

Browser Support for :any-link Chrome, Opera, and Firefox (with vendor prefixes; thanks to Selen in the comments for pointing this out).

浏览器支持：任意链接的 Chrome，Opera和Firefox(带有供应商前缀；感谢注释中的Selen指出了这一点)。

广义输入焦点伪类:focus-within (Generalized Input Focus Pseudo-class: :focus-within)

This is an interesting one that I can definitely see being useful. The :focus-within pseudo-class will select not only the element to which :focus would normally apply, but also the parent element.

我绝对可以看到它很有用，这很有趣。 ：focus-within伪类不仅会选择:focus通常应用于的元素，还会选择父元素。

Here’s some example HTML:

这是一些示例HTML：

<div class="outer">
  <label for="email">Email:</label>
  <input type="email" id="email">
</div>

With that, you can write the following CSS:

这样，您可以编写以下CSS：

:focus-within {
  outline: yellow solid 1px;
}

This will cause the yellow outline to apply not only to the focused input, but also to the parent div element, because they both match the focus-within state. The spec also points out that this would work the same way inside “shadow tree” elements, applying the styles to the “host element”.

这将导致黄色轮廓不仅应用于焦点输入，而且应用于父div元素，因为它们都与focus-within状态匹配。 规范还指出，这在“影子树”元素内的工作方式相同，将样式应用于“宿主元素”。

Browser Support for :focus-within None.

浏览器支持：focus-within无。

拖放伪类:drop和:drop() (Drag-and-Drop Pseudo-class: :drop and :drop())

Now that drag-and-drop functionality is so common in apps, these selectors could prove valuable for improving the user experience.

既然拖放功能在应用程序中如此普遍，那么这些选择器对于改善用户体验可能会很有价值。

The :drop selector lets you style the drop zone (the place where the element is supposed to be dropped), during the time when the user is dragging (or carrying) the element to be dropped.

:drop选择器使您可以在用户拖动(或携带)要放置的元素的过程中设置放置区域(应该放置元素的位置)的样式。

.spot {
  background: #ccc;
}

.spot:drop {
  background: hotpink;
}

The above CSS will apply a neutral gray background color to the .spot element when the user is not dragging. But when the user starts dragging to the .spot element, the background color will change and stay that way until the item is dropped.

当用户不拖动时，上述CSS将为.spot元素应用中性灰色背景色。 但是，当用户开始拖动到.spot元素时，背景颜色将更改并保持这种方式，直到删除该项目为止。

The alternate :drop() syntax takes one or more of the following keyword values:

备用的:drop()语法采用以下一个或多个关键字值：

• active: Indicates the current drop target for the item dragged.

  active ：指示所拖动项目的当前放置目标。

• valid: Indicates if the drop target is valid in relation to the item being dragged (e.g. if the target only accepts files, other items wouldn’t be valid)

  valid ：指示放置目标相对于要拖动的项目是否有效(例如，如果目标仅接受文件，则其他项目无效)

• invalid: Opposite of previous, lets you style the drop target if it’s invalid in relation to the item dragged.

  invalid ：与上一个相反，如果放置目标相对于拖动的项目无效，则可用于设置放置目标的样式。

Multiple keywords can be used to make things more specific and if an argument is not given then it will just act like :drop, so there’s really no point in using the parentheses unless you plan to specify an argument.

可以使用多个关键字使事情更具体，如果不指定参数，则其作用就像:drop ，因此除非您计划指定参数，否则使用括号实际上没有意义。

Important notes:

重要笔记：

• The Working Draft version of the spec had a completely different set of pseudo-classes for this, so these are still in flux.
  规范的工作草案版本为此具有一组完全不同的伪类，因此它们仍在不断变化。

• The drop() syntax is “at-risk”, so it may be removed.

  drop()语法“有风险”，因此可以将其删除。

Browser Support for :drop and :drop() None.

浏览器对：drop和：drop()的支持无。

荣誉奖 (Honorable Mentions)

In addition to the ones discussed above, there are some other new features that I won’t go into detail on but are worth a brief mention:

除了上面讨论的功能外，还有一些其他新功能我将不做详细介绍，但值得一提：

• The column combinator (||), for defining relationships between cells and columns in tables and grids.

  列组合器( || )，用于定义表和网格中单元格与列之间的关系。

• The :nth-column() and :nth-last-column() pseudo-classes for targeting specific columns of tables and grids.

  :nth-column()和:nth-last-column()伪类用于定位表和网格的特定列。

• The attribute node selector attr(), which is the first non-element selector.

  属性节点选择器attr() ，这是第一个非元素选择器 。

• The alternate version of the descendant combinator, represented by >> (instead of just a space character)

  后代组合器的备用版本，用>>表示(而不是空格字符)

• The :user-error pseudo-class for styling inputs that have incorrect user-entered data.

  :user-error伪类，用于对具有错误的用户输入数据的输入进行样式设置。

• Namespaces defined with the @namespace at-rule.

  用@namespace规则定义的命名空间。

• The :dir() pseudo-class, which lets you select elements based on their directionality (e.g. ltr).

  :dir()伪类，可让您根据元素的方向性来选择它们(例如ltr )。

• The :scope pseudo-class, which provides a scope, or reference point, for selecting elements.

  :scope伪类，提供选择元素的范围或参考点。

• The time-dimensional :current, :past, and :future pseudo-classes for targeting elements during a timeline progression such as subtitles in a video.

  时间维度的:current ， :past和:future伪类，用于在时间轴进程中定位元素，例如视频中的字幕。

• The :placeholder-shown pseudo-class for styling placeholder text in form elements.

  :placeholder-shown伪类，用于设置表单元素中占位符文本的样式。

结束语和更多信息 (Final Remarks and Further Info)

As already mentioned, these features are very new and as shown by the browser support info and the demos, aren’t very well supported. Many of them are therefore not ready for prime time.

如前所述，这些功能是非常新的，并且浏览器支持信息和演示所显示的功能也未得到很好的支持。 因此，其中许多人还没有准备好迎接黄金时间。

To keep up with the progress, here are some resources on Level 4 selectors:

为了跟上进度，以下是第4级选择器上的一些资源：

• Selectors Level 4 Working Draft

  选择者4级工作草案

• Selectors Level 4 Editor’s Draft

  选择者4级编辑草稿

• CSS4 Rocks

  CSS4岩石

• CSS4-Selectors

  CSS4选择器

• Selectors Test

  选择器测试

If you notice any errors or bugs, mention them in the comments.

如果您发现任何错误或错误，请在注释中提及它们。

翻译自: https://www.sitepoint.com/future-generation-css-selectors-level-4/

css选择器 选择父级