首页 > 代码库 > 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树合成渲染树时渲染结点与选择器链的匹配