What is css selector priority

CSS selector priority is determined in the following order: Specificity (ID > Class > Type > Wildcard) Source order (Inline > Internal style sheet > External style sheet > User agent style sheet ) Declaration order (later declarations take precedence) Importance (!important forces higher priority)

CSS selector priority

CSS selector priority determines which selector will be used when multiple selectors are applied to an element. A selector with a higher priority will override a selector of the same type with a lower priority.

CSS selector priority is determined by the following four aspects, arranged from high to low:

1. Specificity

Specificity is determined by selection Determined by the number and position of selector types used in the selector. The following types of selectors have increasing specificity:

• ID selector (#)
• Class selector (.)
• Type selector (html, body etc.)
• Wildcard (*)

2. Source order

If the specificity of two selectors is the same, the source Selectors with more specific sources have higher priority. The source order is:

• Inline style
• Internal style sheet
• External style sheet
• User agent style sheet

3. Declaration order

If the specificity and source order of two selectors are the same, the declaration written later in the CSS document will have higher priority.

4. Importance

!important Keywords can force the priority of the selector to be increased. However, its use should be avoided as it breaks the maintainability of CSS.

Example:

The following example illustrates the application of priorities:

<code class="css">#primary {
  color: red;
}

.bold {
  color: blue;
}

p {
  color: green;
}

body {
  color: black;
}

p.bold {
  color: purple !important;
}</code>

In the above example, p.bold has speciality 2 (type selector class selector) and !important is included in the declaration, so it has the highest priority. So for a paragraph with class p.bold, the style (purple) of p.bold will be applied instead of #primary (with a specificity of 1 ), .bold (specificity is 1) or p (specificity is 0).

The above is the detailed content of What is css selector priority. For more information, please follow other related articles on the PHP Chinese website!