What does the priority of css selector from high to low mean?

CSS selector priority from high to low: Inline style ID selector class selector label selector universal selector

CSS selector priority from high to low

CSS selector priority determines which selector will take effect when multiple selectors are applied to HTML elements. The priority is from high to low, in the following order:

1. Inline styles

• Styles specified directly in HTML elements have the highest priority.

2. ID selector

• Use the "#" symbol to specify the ID of the element, and its priority is second only to inline styles.

3. Class selector

• Use the "." symbol to specify the class of the element, which has lower priority than the ID selector.

4. Tag selector

• Specifies the tag name of the HTML element, with a lower priority than the class selector.

5. Universal selector

• Use "*" to match any element with the lowest priority.

Example:

Consider the following HTML code and CSS styles:

<code class="html"><p id="my-paragraph" class="important">This is a paragraph.</p></code>

<code class="css">/* 行内样式 */
#my-paragraph {
  color: red;
}

/* 类选择器 */
.important {
  font-weight: bold;
}

/* 标签选择器 */
p {
  font-size: 16px;
}</code>

In this example, the "my-paragraph" element Inline styles have the highest priority, so it overrides all other styles. This means that the paragraph text will appear in red. Other styles will be applied according to their priority order:

• Apply the class selector to make the text bold.
• Apply the tag selector and set the text size to 16px.

The above is the detailed content of What does the priority of css selector from high to low mean?. For more information, please follow other related articles on the PHP Chinese website!