Home > Developer > JavaScript
CSS style priority, css style
Speaking of the style priority of css, I will review it today. The style priority of css can be divided into two parts:
1,View the weight priority from the position where the CSS code is placed:
Inline Style>Internal embedded Style>External Style
2,Weight priority of the selected style selector:
Important>Inline Style>ID>Class, pseudo class, attribute Selector>Tags, pseudo elements>Wildcard
Today, let's focus on the 2nd-style selector.
See the following code:
<!DOCTYPE html>Run the Code as follows:
It is pink. According to the above statement, class1 and class2 do not all belong to Classes. Since the priorities are the same, shouldn't class2 (green) be followed by class1 (pink?
Yes. The class belongs to the same level, but the priority values of div. class1 and. class2 are different.
See the following table:
Selector |
Weight |
! Important |
1, 0, 0 |
ID |
0, 1, 0, 0 |
Class, pseudo class, attribute Selector |
0, 0, 1, 0 |
Tags, pseudo elements |
0, 0, 0, 1 |
Wildcard |
0, 0, 0 |
When we see the html code, we should not look at the style it calls. For example, the class1 and class2 above are the same when they are placed on div labels.
However,In fact, their weights are different. So we need to track the css styles and view their weights.
The weight calculation method is to use the corresponding weight values in the preceding table to overlay and obtain the final value. The greater the value, the larger the weight, and the higher the priority.
For example, class1 and class2 in the above Code:
Combine the weights listed above to obtain the weights of class1 and class2.
Class1=Div (0001) +. class1 (0010)=0011
Class2=. Class2 (0010)=0010
The weight of class1 is greater than the weight of class2, so that the priority of class1 is higher than that of class2.
So,<Div class = "class1 class2"> the pink color of class1 is displayed.
The following lists the weights of several css expressions:
Css selector expression |
Weight |
H1 + * [rel = up] |
0011 |
Li. red. level |
0021 |
# Test: not (ii) |
0110 |
# Test: before |
0101 |
Okay,What if the style has the same priority? Then you have to check the order in which they appear. And then overwrite the previous one.
Note:Is the sequence in the style sheet, not the sequence in which the class appears in the html Tag.
As follows:
<! DOCTYPE html> Run the above Code. The page shows the result in pink instead of green !!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
