CSS组合优先?

扫码查看
本文介绍了CSS组合优先?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

组合器的优先级如

  a> b〜cd 

(注意 c d 是后代组合器)



或者它只是从左到右读取, p>

 ((a> b)〜c)d 

解决方案

不,组合器中没有优先级的概念。但是,复杂选择器中元素的顺序有一个概念。



任何复杂的选择器都可以在任何有意义的方向读取,但这并不意味着该组合者是或,因为他们 祖先后代上一个+下一个)。这是为什么元素的顺序是重要的。



有一个部分描述他们的CSS引擎如何评估选择器。这是XUL特定的,但是相同的布局引擎用于Firefox的UI和在Firefox的视口中显示的页面。



正如Google在上面的引文中所描述的, 键选择器只是指最右边的简单选择器序列,因此从右向左

请记住两件事:




  • >;在心脏,选择器是选择器,并且所有它打算做的是匹配满足特定条件(由选择器的组件布局)的元素。在哪个方向读取是由实现;正如另一个答案所指出的,没有说明评估选择器的顺序

  • 这两个文章都暗示每个简单选择器都是从左到右依照其简单选择器序列 为什么我相信这不是情况)。文章所说的是浏览器引擎将评估关键字选择器序列以确定其工作DOM元素是否与其匹配,然后如果匹配,则通过遵循组合器来进入下一个选择器序列检查与该序列匹配的任何元素,然后冲洗并重复,直到完成或失败。







有了这一切,如果你要求我阅读选择器,并描述他们选择的纯英语,我会从右到左阅读他们(不是我确定这是否相关

  > a> b〜cd 

代表:


Is there a precedence to combinators like

a > b ~ 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:

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.

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:

Bear in mind two things:

  • 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.

  • 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!).

So, the selector:

a > b ~ c d

would mean:

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

07-16 19:33
查看更多