CSS规则树和HTML的DOM树合成渲染树时渲染结点与选择器链的匹配
在浏览器内核(排版引擎)CSS规则树和HTML的DOM树合成渲染树的时候,会涉及到渲染树的位置属性的问题,因为其位置属性将通过CSS选择器链的优先级来决定,而渲染树的某个结点可能会同时满足多个选择器链,这时候就要通过选择器的优先级来完成属性的赋值。
在这个地方,我仅仅处理了几个简单的选择器情况:{(.class) (#id) (element) (#id,.class,elememt) (#id>.class) (#id element) (#id.class)}。
这时候,将渲染结点同时满足的几个选择器链通过其优先级加权算值,从小到大依次覆盖渲染结点;而如何确定此渲染结点是否满足某个选择器链呢?
我的实现过程大致如下:
首先给定选择器的结构体如下:
struct CSSParserSelector { enum TYPE {ID,CLASS,ELEMENT}; enum RELATION {NONE,DESCENDANT,CHILD,AND}; TYPE m_Type; std::string m_Name; RELATION m_Relation; struct CSSParserSelector *ptr; CSSParserSelector():m_Relation(NONE),ptr(NULL) {} };
从本渲染结点开始,判断此结点是否与选择器链表的当前选择器相匹配。如果匹配,判断此选择器与下一个选择器的关系:如果为NONE,表示本选择器是选择器链的最后一个,返回成功;如果关系为AND (比如:#id.class),选择下一个选择器与本渲染结点继续比较;如果关系为CHILD,表示本选择器是下一个选择器的子结点,返回下一个选择器与下一个渲染结点的匹配结果;否则,关系为DESCENDANT,选择器和渲染结点各指向下一个结点,然后将渲染结点继续回溯,直到第一个满足回溯后的选择器的结点,此时将继续判断回溯后的选择器和回溯后的渲染结点是否匹配。这个过程大致如下:
/** *选择器是否与渲染结点匹配 */ bool RenderTree::IsSelectorsMatchRenderTree(CSSParserSelector *selector,RenderNode *renderNode) { if(IsSelectorMatchRenderNode(selector,renderNode)) { if(selector->m_Relation == CSSParserSelector::NONE) { return true; } else if(selector->m_Relation == CSSParserSelector::AND) { return IsSelectorsMatchRenderTree(selector->ptr,renderNode); } else if(selector->m_Relation == CSSParserSelector::CHILD) { return IsSelectorsMatchRenderTree(selector->ptr,renderNode->parentNode); } else { return IsMatchDescendantRelation(selector->ptr,renderNode->parentNode); } } else { return false; } } /** * 判断与祖父关系是否匹配 */ bool RenderTree::IsMatchDescendantRelation(CSSParserSelector *selector,RenderNode *renderNode) { while(renderNode->getTypeOfRenderNode() != "html" && (!IsSelectorMatchRenderNode(selector,renderNode))) { renderNode = renderNode->parentNode; } if(renderNode->getTypeOfRenderNode() != "html") { return IsSelectorsMatchRenderTree(selector,renderNode); } else { return false; } }最终便得到了匹配结果。而后通过公式便可以计算选择器链表的优先级。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。