我很好奇用于将CSS样式应用于显示层次结构的过程.在我看来,有些或所有选择器必须在每次添加,删除或重新定位显示对象时以及发生事件(例如焦点更改)的情况下重新应用于整个显示列表,因为存在选择器像“第一个孩子”和伪选择器,如“：focus”.
样式的初始应用是否一次扫描整个显示列表一个元素,应用样式,还是将所有对象排列在前面并与特定规则类别相关联？或类似的东西.
我真的在寻找一个很好的一般资源在一个真正的实现.
更新：我可能正在寻找一个在this级别的东西,但是我不知道这是否是最先进的技术：“分层约束提供了一个简单而统一的方式来理解CSS 2.0规范的大部分,这个观点也是建议约束求解器提供一种自然的实现技术,每个样式属性和文档中每个元素的位置都可以由变量建模,这些变量的约束来自浏览器功能,源自类型元素的默认布局行为,文档树结构以及样式规则的应用,文档的最终出现是通过找到这些约束的解决方案来确定的.其中提出了如何和何时解决约束的问题.
解决方法
Damn…
WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child.
这是一个处理它的方法,sledghammer杀死一只苍蝇,我会记得不要使用那些选择器,永远,哈哈.
很有用：After parsing the style sheet,the rules are added to one of several hash maps,according to the selector. There are maps by id,by class name,by tag name and a general map… If the selector is an id,the rule will be added to the id map,if it’s a class it will be added to the class map etc. This manipulation makes it much easier to match rules. There is no need to look in every declaration: we can extract the relevant rules for an element from the maps. This optimization eliminates 95+% of the rules,so that they need not even be considered during the matching process(4.1).
和@BoltClock：
In general,complex selectors are matched from right to left (secondary to these optimizations of course),evaluating each sequence of simple selectors and stepping through each combinator in doing so.
参考
> Discover the power of CSS and Flex
> Why do browsers match CSS selectors from right to left?
> How Browsers Work: Style Computation
> Apache Flex: mx.styles package
> JavaFX: Styling UI Controls with CSS (Release 8)