前端开发

在浏览器内核（排版引擎）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;
     }
}