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