Home > Article > Web Front-end > How to set priority in css (weight rules)
How to set priority in css (weight rules)
- PHPzOriginal
- 2023-04-24 09:11:173745browse
1. What is CSS setting priority?
CSS (Cascading Style Sheets), cascading style sheets, is used to add styles to web pages. However, when multiple CSS rules style the same element, there will be a style priority problem. CSS priority setting is the solution to this problem.
In CSS, each rule has a certain weight. Rules with higher weights will override rules with lower weights to achieve style priority. CSS setting priority involves four factors: the order of selectors, classes, IDs, and styles.
2. CSS priority weight rules
1. Selector weight
In CSS, selectors are divided into element selectors, class selectors and IDs Selector. In the event of a style conflict, the weight of the selector increases in the following order:
Element selector (1)
Class selector (10)
ID selector (100)
2. Weights of classes and attributes
The weights of classes and attributes are the same as the weights of selectors. When styles conflict, they also determine priority according to the above increasing rules.
3. The order of styles
When styles conflict, the styles defined later will replace the previously defined styles. Therefore, if there are styles defined with the same weight, the last defined style will override the previous one.
4.!important keyword
In CSS, the !important keyword allows the style definition to have the highest weight and will override other definitions regardless of selector, class, ID or order. . However, this method should be avoided as much as possible because it will destroy the inheritance and readability of the style.
3. Examples of CSS setting priority
In order to better understand CSS setting priority, the following are some examples:
1. Priority of selector
The following style rules will be applied first to div elements:
div{
font-size: 22px; color: red;
}
/Element selector/
p{
font-size: 18px; color: blue;
}
/Element selector/
.container div{
font-size: 14px; color: green;
}
/Class selector /
.class1{
font-size: 24px; color: yellow;
}
/ID Selector/
id1{
font-size: 28px; color: purple;
}
2. The style defined later has a higher priority
In the following style rules, the color defined later has a higher priority:
p{
color: red;
}
p {
color: blue;
}
3.!important has the highest priority
Among the following style rules, color: yellow; has the highest priority and will be applied to the p element first. ：
p{
color: red!important; font-size: 18px; color: blue;
}
p{
color: yellow;
}
4. Summary
CSS setting priority is Introduced to solve style conflict problems. In the event of style conflict, the order of selectors, classes, IDs, and styles will all affect priority. Understanding the rules for setting priority in CSS can better solve style problems and improve development efficiency.
The above is the detailed content of How to set priority in css (weight rules). For more information, please follow other related articles on the PHP Chinese website!