CSS组合子优先级? [英] CSS combinator precedence?

问题描述

像这样的组合子有优先级吗

Is there a precedence to combinators like

a > b ~ c d

(注意c和d之间的空格是后代组合子)

(Note the space between c and d is the descendant combinator)

还是只是从左到右阅读，比如

Or is it just read left-to-right, like

((a > b) ~ c) d

?

推荐答案

不，组合器中没有优先级的概念.但是，复杂选择器中存在元素顺序的概念.

No, there is no notion of precedence in combinators. However, there is a notion of order of elements in a complex selector.

任何复杂的选择器都可以在任何对你有意义的方向上阅读，但这并不意味着组合符是 分布式 或 交换式，因为它们 表示两个元素之间的关系，例如祖先后代和上一个+下一个.这就是为什么元素的顺序很重要的原因.

Any complex selector can be read in any direction that makes sense to you, but this does not imply that combinators are distributive or commutative, as they indicate a relationship between two elements, e.g. ancestor descendant and previous + next. This is why the order of elements is what matters.

根据谷歌，但是，浏览器实现他们的选择器引擎，以便他们评估复杂的选择器从右到左:

According to Google, however, browsers implement their selector engines such that they evaluate complex selectors from right to left:

引擎 [Gecko] 从右到左评估每个规则，从最右边的选择器(称为键")开始，遍历每个选择器，直到找到匹配项或丢弃规则.

The engine [Gecko] evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule.

Mozilla 的文章，编写用于 Mozilla UI 的高效 CSS有一个部分描述了他们的 CSS 引擎如何评估选择器.这是 XUL 特有的，但相同的布局引擎用于 Firefox 的 UI 和显示在 Firefox 视口中的页面. (死链接)

Mozilla's article, Writing Efficient CSS for use in the Mozilla UI has a section that describes how their CSS engine evaluates selectors. This is XUL-specific, but the same layout engine is used both for Firefox's UI and pages that display in Firefox's viewport. (dead link)

正如谷歌在上面引用中所描述的，键选择器只是指最右边的简单选择器序列，所以它也是从右到左:

As described by Google in the above quote, the key selector simply refers to the right-most simple selector sequence, so again it's from right to left:

样式系统从键选择器开始匹配规则，然后向左移动(在规则选择器中查找任何祖先).只要选择器的子树继续检出，样式系统就会继续向左移动，直到它匹配规则，或者因为不匹配而放弃.

The style system matches rules by starting with the key selector, then moving to the left (looking for any ancestors in the rule’s selector). As long as the selector’s subtree continues to check out, the style system continues moving to the left until it either matches the rule, or abandons because of a mismatch.

记住两点:

• 这些是根据实施细节记录的；本质上，选择器就是一个选择器，它所要做的就是匹配一个满足特定条件的元素(由选择器的组件布置).读取的方向取决于实现；正如另一个答案所指出的，规范没有说明评估选择器的顺序在或关于组合子优先级.

• These are documented based on implementation details; at heart, a selector is a selector, and all it is intended to do is to match an element that satisfies a certain condition (laid out by the components of the selector). In which direction it is read is up to the implementation; as pointed out by another answer, the spec does not say anything about what order to evaluate a selector in or about combinator precedence.

这两篇文章都没有暗示每个简单选择器在其简单选择器序列中从左到右进行评估(请参阅 this answer 说明为什么我认为 不是 的情况).文章所说的是，浏览器引擎将评估键选择器序列以确定其工作 DOM 元素是否匹配它，然后如果匹配，通过跟随组合器进入下一个选择器序列和检查与该序列匹配的任何元素，然后冲洗并重复，直到完成或失败.

Neither article implies that each simple selector is evaluated from left to right within its simple selector sequence (see this answer for why I believe this isn't the case). What the articles are saying is that a browser engine will evaluate the key selector sequence to figure out if its working DOM element matches it, then if it does, progress onto the next selector sequence by following the combinator and check for any elements that match that sequence, then rinse and repeat until either completion or failure.

话虽如此，如果您要我阅读选择器并用简单的英语描述它们选择的内容，我也会从右到左阅读它们(虽然我不确定这是否与实现细节有关！).

With all that said, if you were to ask me to read selectors and describe what they select in plain English, I would read them from right to left too (not that I'm certain whether this is relevant to implementation details though!).

所以，选择器:

a > b ~ c d

意思是:

选择任何 d 元素
它是 c 元素的后代
它是 b 元素的同级元素
它是 a 元素的子元素(直接后代).

Select any d element
that is a descendant of a c element
that is a sibling of, and comes after, a b element
that is a child (direct descendant) of an a element.

这篇关于CSS组合子优先级?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！