What is the classification of CSS selector priority
This article mainly explains "what is the classification of CSS selector priority". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the classification of CSS selector priority".
I. Classification of priorities
We can divide the priority of CSS into six levels from high to low:
Level 1: attributes with no priority conditions. We just add! important after the attribute. This property can override the same element style defined in all locations on this page.
Level 2: add style directly to the element tag, commonly known as inline style.
Level 3: ID selector. Example: # id {color:red;}
Level 4: class selector, attribute selector or pseudo-class selector. Example: .one {color:blue;}
Level 5: element selector. Example: div {color:yellow;}
Level 6: unified selector. Example: * {color:green;}
Weight and priority rules of selector
CSS will define the weight order of the style according to the special nature of the selector, and the weight of the more special selector takes precedence over the general selector. If there are two selectors with the same particularity, then the selector defined later takes precedence.
How to calculate the particularity of the selector? Let's try to calculate the weight of the selector, as shown in the following figure:
Thank you for your reading, the above is the content of "what is the classification of CSS selector priority". After the study of this article, I believe you have a deeper understanding of what the priority classification of CSS selector is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
