How to set priority in css (weight rules)

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!