Interviewer: Please say something about the CSS selector priority

What is CSS selector priority?

CSS selector priority means that when styling a CSS element, if multiple CSS selectors point to the same element at the same time, the element style of the higher priority selector will eventually be applied to that element.

Calculate the priority of CSS selectors by weight

1.! Important has the highest priority. (Without this attribute, the following vector is used to calculate the priority)

2. The same weight, depending on whose definition is the last, the last will overwrite the previous style

Example 1

Example 2

Example 3 (Same priority, who comes after who counts)

[Resources]

2 minutes to master CSS selector priority (specificity)