Home > Article > Web Front-end > css priority setting
In web page production, we often need to use CSS to control styles. In CSS, there are many ways to define styles, and different ways may define styles for the same element at the same time. In this case, CSS priority issues will be involved. An element may have multiple CSS style definitions, and how to determine which style will ultimately take effect requires understanding the CSS priority setting.
CSS selector priority
CSS selectors are rules used to determine which elements apply which styles. In CSS, the priority of a selector is determined by weight. Each selector has a weight value. The greater the weight value, the more priority it takes effect.
The calculation method of CSS selector weight value is:
Example:
<style> #idSelector { color: blue; } .classSelector { color: green; } div { color: red; } </style> <div id="idSelector" class="classSelector">Hello World!</div>
In this example, the element Hello World!
satisfies the ID selector #idSelector
and the class selector .classSelector
, and the element selector div
, then CSS will determine the final style used according to the following rules:
dc6dce4a544fdca2df29d5ac0ea9906b
will apply the style in ID selector #idSelector
, that is, the font color will become blue . Importance of CSS Properties
Sometimes, we may want some style rules to unconditionally override other style rules. At this time, we need to use the !important attribute of CSS. In CSS, !important can force a certain style rule to take effect first.
Example:
<style> p { color: blue !important; } .classSelector { color: green; } </style> <div class="classSelector"> <p>Hello World!</p> </div>
In this example, the P element has a color attribute applied and is forced to !important. If there is no !important tag, the P element actually applies the color attribute in .classSelector
(the default is green), but due to the addition of !important, the color of the P element will be forced to be blue.
!important tag is not omnipotent, nor can it override inline styles. When inline styles exist, even if !important is set for a selector, it will be overridden by the inline style.
CSS inline style priority
In HTML, inline styles are styles defined directly in HTML tag elements. Since inline styles act on a single element, inline styles always have the highest priority.
Example:
<div style="color: red">Hello world!</div>
In this example, the div element uses inline style and the color is red. Even if other CSS style rules are added, inline styles will not be affected. In this example, the color of the div element must be red.
CSS inheritance rules
CSS inheritance rules stipulate that certain style attributes can be inherited from parent elements. When an element does not specify certain CSS property values, they are inherited from the parent element. For example, the values of the two CSS properties font-family
and font-size
that may be frequently used can be inherited from the parent element.
Example:
<style> div { color: red; } .classSelector { font-size: 18px; font-family: Arial; } </style> <div class="classSelector">Hello world!</div>
In this example, the div element sets the color to red and does not set the font attribute. The child element uses the font attribute of .classSelector
, so the font will inherit from .classSelector
, that is, the font size is 18 pixels and the font is Arial. The color will be inherited from the parent element div, which is red.
Summary:
Although the priority rules of CSS are a bit cumbersome, if we master them, we can better control the style. When setting the priority, we can meet our needs for the priority of certain style attributes by changing the weight of the selector and the !important attribute of the style. At the same time, we should also note that inline styles have the highest priority and will override all other style rules. CSS inheritance rules also allow us to reduce the amount of code and better maintain web page code while ensuring the consistency of style rules.
The above is the detailed content of css priority setting. For more information, please follow other related articles on the PHP Chinese website!