Comparison of descendants, elements, classes, ID selectors, and inline style precedence in CSS

The comparison selector priority test method is as follows

Apply all selectors to a hyperlink, observe the result, and draw a conclusion.

The output is a description of the highest priority of the row style. Remove the inline style code:

Output: Descendant selectors take effect, annotate their code, and continue to compare:

Draw the output and comment the code.

The output results are obtained.

From the above results are not difficult to see between the lines style > Descendants > ID > Class > elements

So why would that be the result?

The priority is judged by the weight, and the higher the weight the higher the priority: the general Contract ID selector has a weight of 100, the class selector weight is 10, and the element selector weight is 1. The right of a complex selector

Weight equals the sum of the weights of all selectors. The weight value in the descendant selector reaches 100+1=101 beyond the ID selector, so it can be queued before the ID selector.

But there is a column outside, that is!important, his priority is the highest.

Output Result:

Even the lowest-priority element selector can become the highest priority under its modification.

Comparison of descendants, elements, classes, ID selectors, and inline style precedence in CSS