下一个同级组合器不应与复杂的选择器一起使用 [英] Next-sibling combinator should not work with complex selectors

问题描述

TL; DR

根据规范，以下内容不起作用，但确实可以:

According to the spec the following should not work but it does:

.a .b + .b {margin-top:20px;}

详细信息

根据规范下一个兄弟组合器""(或相邻的同级组合器")仅适用于简单选择器序列"，本身被定义为为

According to the spec the "Next-sibling combinator" (or "adjacent sibling combinator") should only work for "sequences of simple selectors", which themselves are defined as

...一系列不由组合符分隔的简单选择器.

... a chain of simple selectors that are not separated by a combinator.

在上面给出的示例中，左侧的选择器 .a .b 包含后代组合器"(由空白表示)，因此不应使用.

In my example given above, the selector .a .b to the left contains a "descendant combinator" (represented by whitespace) and should therefore not be allowed.

有趣的是，以下内容实际上根本不起作用:

Interestingly, the following does indeed not work at all:

.b + .a .b {margin-top:20px;}

为什么我的介绍性示例在现代浏览器中有效?

Why does my introductory example work in modern browsers?

推荐答案

在规范，您可以阅读:

下一个同级组合器由加号"组成.(U + 002B，+)字符，用于分隔两个简单选择器序列.这两个序列所表示的元素在文档树中共享相同的父对象，而第一个序列所表示的元素紧接在第二个序列所表示的元素之前.

The next-sibling combinator is made of the "plus sign" (U+002B, +) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.

没有什么可说的是，它仅适用于简单选择器序列" .简而言之， + 字符将两个简单选择器序列分开，并且没有限制，因此可以有更多选择器.

Nothing is saying that it should only work for "sequences of simple selectors". It's simply saying that the + character separates two sequences of simple selectors and it restricts nothing beyond this so you can have more selectors.

让我们考虑以下示例:

.a .b + .b
.b + .b
span.a:not(.b) .b + .b > div

在所有这些文件中，我们都有 .b + .b 部分，由以下部分描述:

In all of them we have the portion .b + .b which is described by:

加号"(U + 002B，+)字符，用于分隔两个简单选择器序列.

the "plus sign" (U+002B, +) character that separates two sequences of simple selectors.

---

如果您在本规范的开头阅读了内容，将会发现通用的规则，可以确认这一点:

---

If you read at the start of the specification you will find the generic rule that confirms this:

选择器是由一个或多个序列的简单选择器组成的链，由组合符分隔.一个伪元素可以附加到选择器中最后一个简单选择器序列上.

A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector.

一系列简单选择器是一系列简单选择器，它们之间没有用组合符分隔.它总是以类型选择器或通用选择器开头.序列中不允许使用其他类型选择器或通用选择器.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

一个简单的选择器可以是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

基本上我们可以拥有

Seq_simple_selectors + Seq_simple_selectors Seq_simple_selectors > Seq_simple_selectors

然后在每个 Seq_simple_selectors 中，我们可以有类似的内容:

Then inside each Seq_simple_selectors we can have something like:

 div.a.b#id::before

如果我们考虑您的示例 .a .b + .b ，则您有3个序列，并且在每个序列中只有一个简单的选择器.

If we consider your example .a .b + .b you have 3 sequences and in each sequence only one simple selector.

您的第二个示例也很好，并且如果具有正确的HTML可以正常工作:

You second example is also fine and working if you have the correct HTML that goes with:

.b + .a .b {
  background: red;
  height: 20px;
}

<div class="b"></div>
<div class="a">
  <div class="b"></div>
</div>

无效的是拥有这样的 .b +>.a .在这种情况下，我们没有:

What is invalid is to have something like this .b + > .a. In this case we don't have:

加号"(U + 002B，+)字符，用于分隔两个简单选择器序列.

the "plus sign" (U+002B, +) character that separates two sequences of simple selectors.

但是我们在一系列简单选择器和一个组合选择器之间是分开的.

But we have a separation between a sequence of simple selector and a combinator selector.

这篇关于下一个同级组合器不应与复杂的选择器一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！