Recent rules in learning CSS precedence this place has a lot of knowledge, and it's important, so add a little bit of notes today.
The weights of CSS
first, the introduction of CSS methods
1. On the node element, use the Style property
2. Introduction of external files via link
3. Use the style tag to introduce the page inside
Three ways to introduce the difference
index.html file
<! DOCTYPE html>BODY.CSS file
body { background:green; }1. The first method is higher than the following two priority, regardless of the introduction sequence, whether the link and style tags are placed in the head, inside the body, or at the end of the HTML tag, the page will be rendered yellow
2. The second and third type of introduction, followed by the introduction of the style before the introduction of the pattern to remove the body on the style label
Adjust the order of link and style labels. Link in front, the style tag after the page is rendered red, instead, the page will appear green
second, the way to get the node
1.id
2.class
3. Tags
4. Properties
idThe ID value should be unique on one page, but when multiple identical IDs are present, the style is valid for all ID nodes, using: #后面跟节点id值
<body> <p id= "id_p" > First paragraph </p> <p id= "id_p" > second paragraph </p></body>#id_p { color:red;}The results show that the text in the two paragraphs is presented in red
1.id has a higher weighting relative to class and label, and the ID has the highest weight when the ID and class are set to one node at a time.
2. When styling the same ID by using the link and style tags, the style that was introduced after it was overridden
classYou can use class to set styles on multiple nodes at the same time, and you can overlay class usage. How to use. A single class name followed by a node
<body> <p class= "Class-p" > First paragraph </p> <p class= "Class-p class-p-2" > second paragraph </p> </body>. class-p { color:red;}. class-p-2 { color:green;}At this point, the first paragraph presents red, and the second paragraph presents the green
Adjust HTML
<body> <p class= "Class-p" > First paragraph </p> <p class= "Class-p-2 class-p" > second paragraph </p> <!--change the order of Class-p and Class-p-2 --></body>When you adjust the position of class-p and class-p-2, the page rendering effect is the same. Description: Class-style rendering is independent of the order in which class is used, related to the order of the class style settings, the class style of the same weight, and the style settings that are overridden by the style settings in the style settings.
属性You can also get the node that you want to style by using the properties on the node
<body> <p> First paragraph </p> <p title= "title of second paragraph" > second paragraph </p></body>[Title] { color:red;}The second paragraph has the title property, so the second paragraph renders the red
标签Get a node for style settings by tag name
<body> <p> First paragraph </p> <p> second paragraph </p></body>p { color:red;}All P-Tag nodes in the page appear red
Mixed
The above four ways can be mixed, the corresponding node style settings. The combination includes hierarchy nesting, style overlay, node association, and so on. The result is a high-weighted person.
Three, style weights
The above four methods, for a single, have the highest ID, class, and attribute siblings (the style that follows the previous style), with the lowest label.
When mixed in four ways, the results of the weights prevail. The ID, class, attribute, and label styles that exist on the same node are sorted, and the first is the final rendering effect. For example, there are several types of style settings for node p, first selecting all styles with IDs, including nested styles. Sort another type of style under the same ID
<body class= "Body" > <p id= "id_p" > First paragraph </p></body>. Body #id_p { color:red;} #id_p { Color:green}Although both style settings have an ID, and the green effect is set after red, the sort can get the same #id_p under the previous one exists. Body, so the final rendering effect is red
When there is a style of class, attribute, and label, sort by order, the style of the same type or the same weight (class and attribute), the previous style overrides the preceding style (whichever is the type, not the name), and the final ranking first is the final rendering effect.
Attention:
1. Nesting, overlay, >, + and so on, will not affect the final effect.
2.:nth-child,: First-child,: Last-child and other pseudo-classes above class and attribute
Iv.!important
!important is a special case in a style that has the highest weight, above the ID, class, attribute, label, and style properties
<body class= "Body" style= "background:red" ></body>. body { background:green!important;}The page rendering effect is green. However, when the style setting is sorted, it is still under the same type style, with the other type having a higher weight as the final effect. For example
body.body { background:blue!important;}. Body { background:green!important;}Under the same class and!important, the previous style setting has the body tag, the latter one does not, so the final effect renders blue
Description
1. Avoid using!important as much as possible. Because the!important has the highest weight, it will be mandatory for this attribute of the node and should be used with caution
2. Usage Scenarios
When a plugin is introduced, the styles in the plug-in are strongly covered. When a plug-in is introduced, the style attributes within the plug-in can be forced to be!important by the plugin without modifying the style code in the plug-in.
Strong overlay of inline styles. For auto-generated or dynamically introduced HTML structures with inline styles, the inline style can be forced by!important
1. Workarounds
!important is not recommended in many cases, and there is a rule in stylelint that prohibits the use of!important. There is a workaround that can achieve a similar!important ' effect in most cases
html <body class="body"> <p class="p"> <span class="span">一段文本</span> </p> </body>
css .body .p .span { color: red; } .span.span.span.span.span {/** 自身样式叠加 **/ color: green; }
You can increase the class weight and make a duplicate of the style, without considering the inline style and ID.
Usage Prerequisites:
1. No Inline Styles Style property
2. No ID style
3. Extra nesting number of self-styled overlays
Benefit: Reduce hierarchy nesting without considering DOM hierarchy
V. Summary
In general, the calculation of weights follows the following rules:
1. According to the type of comparison, the type of high-weight display;
2. The same type, according to the number of pairs, more than the display;
3. The same quantity, in chronological order, the latter shows
Nested recommendations for use
Style nesting, in addition to increasing the weight, also reflects some of the DOM structure relationship. However, nesting is not required under any circumstances.
Nested more is used for style settings that are unique within a block. A style is only valid within a block, and nested can be used.
When multiple pages are being developed at the same time, nested styles are used to avoid the merging of style overrides.
Nesting is not used as much as possible. The more nesting, the greater the weight, but also the greater the performance consumption of the page. It is recommended to use inheritance and style overlays.
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
Using CSS3 to realize the effect of projectile screen
You don't know the upset CSS properties
How the absolute positioning of CSS is compatible with all resolutions
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
