css选择器，并行选择器_CSS4 –选择器第4级

css选择器，并行选择器

CSS4 – Selectors Level 4 Progress does not stand still, and, following the CSS3, the new CSS4 comes to us, which is developing by the W3C editing team. Historically, the process of development of CSS is independent from the process of development of web-browsers – both are developed in parallel. This has led to the fact that different browsers support different sets of CSS specifications. But back to CSS4. W3C periodically update a working (draft) specification CSS4 and I want to give you first and basic information about what is already included in the specification of CSS selectors level 4.

CSS4 – Selectors Level 4的进展并没有停滞不前，而继CSS3之后，由W3C编辑团队开发的新CSS4出现了。 从历史上看，CSS的开发过程独立于Web浏览器的开发过程-两者都是并行开发的。 这导致了一个事实，即不同的浏览器支持不同CSS规范集。 但是回到CSS4。 W3C会定期更新有效的(草稿)规范CSS4，并且我想向您提供有关第4级CSS选择器规范中已经包含的内容的第一手和基本信息。

Quite a plenty of new changes was brought with CSS4. No new pseudo elements was added, it seems that they might be added in other modules in the future. However, in the development of pseudo classes was paid a lot more attention. The following elements were added in CSS4 (at the current moment): logical combinations, elemental and attribute selectors, new pseudo-classes, combinators and grid-structural selectors. The following is high-level overview of them.

CSS4带来了很多新的变化。 没有添加任何新的伪元素，似乎将来它们可能会添加到其他模块中。 但是，在伪类的开发中受到了更多的关注。 CSS4中添加了以下元素(当前)：逻辑组合，元素和属性选择器，新的伪类，组合器和网格结构选择器。 以下是它们的高级概述。

逻辑组合：否定和匹配任何伪类 (Logical Combinations: Negation and Matches-any Pseudo-classes)

In CSS3, the negation pseudo-class :not can be applied only to simple selectors, pseudoclasses, tags, identifiers, classes and class selectors parameters. Pseudoelements and such combinations like UL LI or UL > LI was not supported, also we could not include the negation pseudo-class :not in itself. In Level 4, however, :not( ) can now be applied to a list of selectors and complex selectors. Now, no longer will selector lists have to be divided into separated blocks of code for each selector.

在CSS3中，否定伪类：not只能应用于简单的选择器，伪类，标记，标识符，类和类选择器参数。 不支持伪元素以及诸如UL LI或UL> LI之类的组合，我们也不能将否定伪类包括在内：not本身。 但是，在级别4中，：not()现在可以应用于选择器和复杂选择器的列表。 现在，不再需要将选择器列表分为每个选择器单独的代码块。

p:not(.active, .visible) {
	color: yellow;
}

p:not(.active, .visible) {
	color: yellow;
}

The same applies for the :matches class – a new pseudo-class that would allow for matching styles to certain elements. You can use the :matches pseudo-class to group selectors together, to have one line of code grouping items for matching.

：matches类也是如此，这是一个新的伪类，可以将样式匹配到某些元素。 您可以使用：matches伪类将选择器组合在一起，以使一行代码分组项进行匹配。

article:matches(.active, .visible) {
	background: green;
}

article:matches(.active, .visible) {
	background: green;
}

属性选择器：区分大小写 (Attribute Selectors: Case-sensitivity)

Presently, in the CSS4, the case of attributes will no longer have to be case-sensitive with the use of the identifier i before the closing bracket ]. For example, in

当前，在CSS4中，属性的大小写将不再需要区分大小写，因为在括号[]前使用标识符i 。 例如，在

[frame=hsides i] { border-style: solid none; }

[frame=hsides i] { border-style: solid none; }

the ‘hsides’ attribute will be applied to the ‘frame’ whether it is ‘HSIDES’, ‘hsides’, ‘Hsides’ and so on. And this applies even in XML with case-sensitive attribute values. This is useful to avoid prolonged debug.

无论是“ HSIDES”，“ hsides”，“ Hsides”等等，“ hsides”属性都将应用于“ frame”。 这甚至适用于具有区分大小写的属性值的XML。 这对于避免长时间调试很有用。

语言伪类 (Linguistic Pseudo-classes)

There is another new CSS4 pseudo-class – :dir. As a directionality pseudo-class, it is used in HTML5 to help us determine the directionality of elements, along with other factors such as surrounding text. A :dir(rtl) pseudo-class will give an element a directionality of right-to-left, while a :dir(ltr) will have a opposite directionality: left-to-right. Pay attention that the :dir is not the same thing as [dir=…] attribute selectors, since :dir matches the value as determined by the UA.

还有另一个新CSS4伪类–：dir。 作为方向性伪类，它在HTML5中用于帮助我们确定元素以及其他因素(例如周围的文本)的方向性。 ：dir(rtl)伪类将为元素提供从右到左的方向性，而：dir(ltr)将具有相反的方向性：从左到右。 请注意：dir与[dir =…]属性选择器不同，因为：dir与UA确定的值匹配。

New changes occur to linguistic pseudo-classes :lang. Currently, :lang can perform wildcard matching. For instance, :lang(de-DE) matches all of the matching language tags, not just ‘de-DE’ and ‘de-DE-1996’. Wildcard matching on the primary language (or first subtag), is done with an asterisk. For instance, *-CH would match ‘de-CH’, ‘it-CH’, and so on.

语言伪类：lang发生了新的变化。 当前，：lang可以执行通配符匹配。 例如，：lang(de-DE)匹配所有匹配的语言标签，而不仅仅是'de-DE'和'de-DE-1996'。 主要语言(或第一个子标签)上的通配符匹配用星号完成。 例如，*-CH将匹配“ de-CH”，“ it-CH”，依此类推。

CHeck the following example which describes the following: the two following selectors represent an HTML document that is in Belgian French or German. The two next selectors represent q quotations in an arbitrary element in Belgian French or German:

请检查下面的示例，该示例描述了以下内容：以下两个选择器代表比利时法语或德语HTML文档。 接下来的两个选择器用比利时法语或德语表示任意元素中的q引号：

html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

位置伪类 (Location Pseudo-classes)

The Location pseudo-classes refer to the visitor’s location on your site (do not confuse it with the geocoding). New changes are coming to location pseudo-classes. One of them is a hyperlink pseudo-class named :any-link in which it stands for any element that is the source anchor of a hyperlink.

Location伪类是指访问者在您网站上的位置(请勿将其与地址解析混淆)。 对位置伪类的新更改即将到来。 其中之一是名为：any-link的超链接伪类，其中它代表作为超链接源锚点的任何元素。

The second is the :local-link pseudo-class which styles hyperlinks, depending on the website visitor’s location on the site. This pseudo-class also can differentiate between external and internal links. The :local-link refers to elements that have a source anchor hyperlink whose target is the same as the element’s document URL in non-functional use. In functional use :local-link can be in a hierarchical scheme as follows:

第二个是：local-link伪类，它根据网站访问者在网站上的位置来为超链接设置样式。 该伪类还可以区分外部链接和内部链接。 ：local-link是指具有源锚超链接的元素，该超链接的目标与非功能性使用中的元素文档URL相同。 在功能上使用：local-link可以采用以下分层方案：

• :local-link(0) – represents a link element whose target is in the same origin as the document’s URL
  ：local-link(0)–表示链接元素，其目标与文档的URL相同
• :local-link(1) – represents a link element whose target has the same origin and first path segment
  ：local-link(1)–表示链接元素，其目标具有相同的原点和第一路径段
• :local-link(2) – represents a link element whose target has the same origin, first, and second path segments
  ：local-link(2)–表示一个链接元素，其目标具有相同的起点，第一和第二路径段
• and so on
  等等

The :scope pseudo-class stands for elements that are in the reference element set. This is is a set of elements that provide a reference point for selectors to match against, such as that specified by the querySelector() call in [SELECTORS-API2], or the parent element of a scoped <style> element in HTML5.

：scope伪类代表参考元素集中的元素。 这是一组元素，为选择器提供匹配的参考点，例如[SELECTORS-API2]中的querySelector()调用指定的元素，或HTML5中范围限定的<style>元素的父元素。

Several examples:

几个例子：

nav :local-link { text-decoration: none; }
a:local-link(0) {...}
a:local-link(1) {...}

nav :local-link { text-decoration: none; }
a:local-link(0) {...}
a:local-link(1) {...}

用户操作伪类：拖放伪类 (User Action Pseudo-classes: drag-and-drop pseudo-classes)

This drag-and-drop :drop pseudo-class applies to elements defined as areas on the page specified to be ‘drop areas’, or in other words, placements on which a user can drop a dragged element. The functional :drop pseudo-class simply goes beyond the regular :drop function to allow for extra filters:

此drop：-drop伪类适用于元素，这些元素定义为页面上指定为“放置区域”的区域，即用户可以在其上放置拖动元素的放置。 功能性的：drop伪类完全超出了常规的：drop函数，以允许使用额外的过滤器：

• :drop(active) – drop target is the current drop target for the drag operation. That is, if the user were to release the drag, it would be dropped onto this drop target
  ：drop(active)–放置目标是拖动操作的当前放置目标。 也就是说，如果用户释放拖动，它将被拖放到该放置目标上
• :drop(valid) – if the host language has a concept of ‘valid’ and ‘invalid’ drop targets, this only matches if the drop target is valid for the object currently being dragged. Otherwise, it matches all drop targets
  ：drop(valid)–如果宿主语言具有“有效”和“无效”放置目标的概念，则仅在放置目标对当前正在拖动的对象有效的情况下才匹配。 否则，它匹配所有放置目标
• :drop(invalid) – if the host language has a concept of ‘valid’ and ‘invalid’ drop targets, this only matches if the drop target is invalid for the object currently being dragged. Otherwise, it matches nothing.
  ：drop(invalid)–如果宿主语言具有“有效”和“无效”放置目标的概念，则仅在放置目标对于当前拖动的对象无效时才匹配。 否则，它将不匹配任何内容。

Example:

例：

:valid-drop-target { box-shadow: 0 0 5px yellow; }
:active-drop-target { outline: solid red; }

:valid-drop-target { box-shadow: 0 0 5px yellow; }
:active-drop-target { outline: solid red; }

时空伪类 (Time-dimensional Pseudo-classes)

The time-dimensional pseudo-classes allow for classification of elements within certain timeframes, for example during speech rendering of a document. The :current pseudo-class is for the element or its ancestor that is active at the moment. For instance, a paragraph being read aloud would be highlighted with the following:

时间维伪类允许在某些时间范围内对元素进行分类，例如在文档的语音渲染期间。 ：current伪类适用于当前处于活动状态的元素或其祖先。 例如，大声朗读的段落将以以下内容突出显示：

:current(p, li, dt, dd) {
	background: yellow;
}

:current(p, li, dt, dd) {
	background: yellow;
}

The :past pseudo-class refers to an element specified to happen before a :current element. A :future pseudo-class is to opposite, refers to an element defined to occur after a :current element.

：past伪类是指指定在：current元素之前发生的元素。 ：future伪类是相反的，指的是定义为在：current元素之后出现的元素。

输入伪类 (The Input Pseudo-classes)

The listed pseudo-classes refer to elements that take user input, such as HTML’s <input> element.

列出的伪类是指接受用户输入的元素，例如HTML的<input>元素。

：enabled和：disabled伪类 (The :enabled and :disabled pseudo-classes)

The :enabled pseudo-class represents user interface elements that are in an enabled state; such elements have a corresponding disabled state. Conversely, the :disabled pseudo-class represents user interface elements that are in a disabled state; such elements have a corresponding enabled state.

：enabled伪类表示处于启用状态的用户界面元素。 这些元素具有相应的禁用状态。 相反，：disabled伪类表示处于禁用状态的用户界面元素。 这些元素具有相应的启用状态。

可变性伪类：read-only和：read-write (The mutability pseudo-classes :read-only and :read-write)

An element matches :read-write if it is user-alterable, as defined by the host language. Otherwise, it is :read-only.

如果元素是用户可更改的，则该元素匹配：read-write，如宿主语言所定义。 否则，它是：read-only。

占位符显示伪类：placeholder-shown (The placeholder-shown pseudo-class :placeholder-shown)

Input elements can sometimes show placeholder text as a hint to the user on what to type in.

输入元素有时可以显示占位符文本，以提示用户输入内容。

default-option伪类：default (The default-option pseudo-class :default)

The :default pseudo-class applies to the one or more UI elements that are the default among a set of similar elements. Typically applies to context menu items, buttons and select lists/menus.

：default伪类适用于一组相似元素中默认的一个或多个UI元素。 通常适用于上下文菜单项，按钮和选择列表/菜单。

selected-option伪类：checked (The selected-option pseudo-class :checked)

Radio and checkbox elements can be toggled by the user. Some menu items are “checked” when the user selects them. When such elements are toggled “on” the :checked pseudo-class applies.

用户可以切换单选和复选框元素。 当用户选择某些菜单项时，它们会被“选中”。 当此类元素“打开”时，：checked伪类适用。

不确定值伪类：不确定 (The indeterminate-value pseudo-class :indeterminate)

The :indeterminate pseudo-class applies to UI elements whose value is in an indeterminate state.

：indeterminate伪类适用于其值处于不确定状态的UI元素。

有效性伪类：：valid和：invalid (The validity pseudo-classes: :valid and :invalid)

An element is :valid or :invalid when its contents or value is, respectively, valid or invalid with respect to data validity semantics defined by the document language. An element which lacks data validity semantics is neither :valid nor :invalid.

就文档语言定义的数据有效性语义而言，元素的内容或值分别为有效或无效时，元素为：valid或：invalid。 缺少数据有效性语义的元素既不是：valid也不是：invalid。

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

The :in-range and :out-of-range pseudo-classes apply only to elements that have range limitations. An element is :in-range or :out-of-range when the value that the element is bound to is in range or out of range with respect to its range limits as defined by the document language. An element that lacks data range limits or is not a form control is neither :in-range nor :out-of-range.

：in-range和：out-of-range伪类仅适用于具有范围限制的元素。 当元素绑定的值相对于文档语言所定义的范围限制在范围内或范围之内时，该元素为：in-range或：out-of-range。 缺少数据范围限制或不是表单控件的元素既不是：in-range也不是：out-of-range。

可选伪类：required和：optional (The optionality pseudo-classes :required and :optional)

A form element is :required or :optional if a value for it is, respectively, required or optional before the form it belongs to can be validly submitted. Elements that are not form elements are neither required nor optional.

如果可以有效提交表单元素所属的表单，则表单元素分别是：required或：optional。 不是表单元素的元素既不是必需的也不是可选的。

用户交互伪类：user-error (The user-interaction pseudo-class :user-error)

The :user-error pseudo-class represents an input element with incorrect input, but only after the user has significantly interacted with it. The :user-error pseudo-class must match an :invalid, :out-of-range, or empty-but-:required form element between the time the user has attempted to submit the form and before the user has interacted again with the form element. User-agents may allow it to match such elements at other times, as would be appropriate for highlighting an error to the user.

：user-error伪类表示输入元素输入错误，但仅在用户与之进行了显着交互之后。 在用户尝试提交表单的时间到用户再次与表单交互之前，：user-error伪类必须匹配：invalid，：out-of-range或empty-but-：required表单元素。表单元素。 用户代理可以允许它在其他时间匹配此类元素，这对于向用户突出显示错误是适当的。

树结构伪类 (Tree-Structural pseudo-classes)

The two existing structural pseudo classes (:empty and :root) were supplemented by the new :blank pseudo-class. It is similar to :empty, except that it also refers to the characters between elements. For instance:

新的：blank伪类补充了两个现有的结构伪类(：empty和：root)。 它与：empty相似，除了它还引用元素之间的字符。 例如：

<p>
</p>

<p>
</p>

It could be considered as :blank but not :empty, because of the line break and other possible whitespaces.

由于换行和其他可能的空格，它可以被视为：blank而不是：empty。

Two new structural pseudo classes were added – :nth-match(An+B of <selector>) and :nth-last-match(An+B of <selector>). The :nth-match stands for items with siblings of (An+B-1) that match a certain selector list that comes before it; the :nth-last-match is similar except it refers to a matching selector list after it in the document.

添加了两个新的结构伪类-：nth-​​match(<selector>的An + B)和：nth-​​last-match(<selector>的An + B)。 ：nth-​​match表示具有(An + B-1)的同级项的项，该项与之前的某个选择器列表相匹配； ：nth-​​last-match是相似的，除了它引用文档中后面的匹配选择器列表。

组合器 (Combinators)

This pseudo-class allows targeting of connected elements using A /ATTR/ B, whereas one element is ID-referenced by the ATTR attribute of another element. This follows the same rules as for Attribute Selectors. THe following example shows highlighting an input when the label is hovered on:

该伪类允许使用A / ATTR / B定位连接的元素，而一个元素由另一元素的ATTR属性ID引用。 这遵循与属性选择器相同的规则。 以下示例显示了将标签悬停在上方时突出显示输入的情况：

label:matches(:hover, :focus) /for/ input,       /* association by 'for' attribute */
label:matches(:hover, :focus):not([for]) input { /* association by containment */
	box-shadow: yellow 0 0 10px;
}

label:matches(:hover, :focus) /for/ input,       /* association by 'for' attribute */
label:matches(:hover, :focus):not([for]) input { /* association by containment */
	box-shadow: yellow 0 0 10px;
}

针对父母 (Targeting a Parent)

CSS4 let us target a parent element using A! > B, where the A element is the parent of the B element. For example we can target the parent of an element when that element is hovered on. As you know, in a drop down menu when the last li is active, the parent li always loses focus in CSS3. However, with the ability to target the parent, it is possible to give the parent li some certain styles when the child li is active, check the following example:

CSS4让我们使用A定位父元素！ > B，其中A元素是B元素的父元素。 例如，我们可以将元素悬停在元素的父元素上。 如您所知，在最后一个li处于活动状态的下拉菜单中，父li始终会失去对CSS3的关注。 但是，由于具有针对父对象的功能，可以在子li处于活动状态时为父li提供某些样式，请检查以下示例：

ul! li:hover {
	color: blue;
}

ul! li:hover {
	color: blue;
}

网格结构选择器 (Grid-Structural Selectors)

In CSS3, columns are possible, but it is very difficult to isolate them for styling. CSS4 allows us to do this – an easy method for working with individual columns. Firstly, this is the column combinator ‘||’ which allows for selection of a column that has a specified set of features. The :nth-column(n) allows for styling of certain columns, starting the count from the beginning. In contrary, the :nth-last-column(n) starts the count from the end. Pay attention, that both :nth-column and :nth-last-column can include ‘odd’ and ‘even’ values. Have a look to the following example:

在CSS3中，可以使用列，但是很难隔离它们以进行样式设置。 CSS4使我们能够做到这一点–一种处理单个列的简便方法。 首先，这是列组合符“ ||” 它允许选择具有一组指定功能的列。 ：nth-​​column(n)允许某些列的样式，从头开始计数。 相反，：nth-​​last-column(n)从末尾开始计数。 注意，：nth-​​column和：nth-​​last-column都可以包含'odd'和'even'值。 看下面的例子：

col.selected || td {
	background: gray;
	color: white;
	font-weight: bold;
}
td:nth-column(1) {
	text-align: center;
}

col.selected || td {
	background: gray;
	color: white;
	font-weight: bold;
}
td:nth-column(1) {
	text-align: center;
}

<table>
	<col span="2">
	<col class="selected">
	<tr><td>A <td>B <td>C
	<tr><td colspan="2">D <td>E
	<tr><td>F <td colspan="2">G
</table>

<table>
	<col span="2">
	<col class="selected">
	<tr><td>A <td>B <td>C
	<tr><td colspan="2">D <td>E
	<tr><td>F <td colspan="2">G
</table>

翻译自: https://www.script-tutorials.com/css4-selectors-level-4/

css选择器，并行选择器