首页 > 代码库 > CSS规则树和HTML的DOM树合成渲染树时渲染结点与选择器链的匹配
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; } }最终便得到了匹配结果。而后通过公式便可以计算选择器链表的优先级。
CSS规则树和HTML的DOM树合成渲染树时渲染结点与选择器链的匹配
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。