Matching between the rendering node and the selector chain when the CSS rule tree and the html dom tree synthesize the rendering tree

Matching between the rendering node and the selector chain when the CSS rule tree and the html dom tree synthesize the rendering tree

When the CSS rule tree in the browser kernel (typographical engine) and the html dom tree are merged into the rendering tree, the location attribute of the rendering tree is involved, the position attribute is determined by the priority of the CSS selector chain, and a node of the rendering tree may satisfy multiple selector chains at the same time, in this case, the priority of the selector is used to assign a value to the attribute.

In this case, I only handle a few simple selector situations :{(. class) (# id) (element) (# id ,. class, elememts) (# id>. class) (# id element) (# id. class )}.

At this time, several selector chains that meet the rendering node's requirements are overwritten from small to large by their priority weighting values. How can we determine whether the rendering node meets a certain selector chain?

My implementation process is roughly as follows:

First, the structure of the given selector is as follows:

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) {}};

Starting from the rendering node, determine whether the node matches the current selector in the selector linked list. If it matches, judge the relationship between this selector AND the next selector: If it is NONE, it indicates that this selector is the last one of the selector chains AND returns success; if the relationship is AND (for example: # id. class), select the next selector to continue the comparison with the current rendering node. if the relationship is CHILD, this selector is the CHILD node of the next selector and returns the matching result between the next selector and the next rendering node; otherwise, the relationship is DESCENDANT. The selector and the rendering node each point to the next node, and then the rendering node continues tracing until the first node that satisfies the Backtracking node, in this case, we will continue to determine whether the backtracing selector matches the backtracing rendering node. This process is roughly as follows:

/*** Whether the selector matches the rendering node */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 = CSSParserSe Lector: CHILD) {return IsSelectorsMatchRenderTree (selector-> ptr, renderNode-> parentNode);} else {return IsMatchDescendantRelation (selector-> ptr, renderNode-> parentNode );}} else {return false ;}}/*** determine whether the relationship with the grandfather matches */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 ;}}

Finally, the matching result is obtained. Then, the priority of the selector linked list can be calculated through the formula.