Detailed explanation of CSS priority calculation rules-CSS Tutorial-php.cn

Recently, I have been studying the rules of CSS priority calculation. This place has a lot of knowledge points, and it is very important. This article mainly introduces the rules of CSS priority calculation. The editor thinks it is quite good. Now I will share it with you and give it to everyone. Be a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Weight of CSS

1. How to introduce CSS

1. On the node element, use the style attribute

2. Introduce external files through link

3. Introduce into the page through the style tag

The difference between the three introduction methods

index.html file

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="body.css">
        <style type="text/css">
            body {
                background: red;
            }
        </style>
    </head>
    <body style="background: yellow;">
    </body>
    </html>

Copy after login

body.css file

    body {
        background: green;
    }

Copy after login

1. The first method has higher priority than the latter two and has nothing to do with the order of introduction. Regardless of whether the link and style tags are placed in the head, body, or at the end of the html tag, the page will display yellow.

2. The second and third types are level introductions. The later introduced styles overwrite the previously introduced styles and remove the style tags on the body.

Adjust the order of link and style tags. The link is in the front and the style tag is in the back. The page will appear red. On the contrary, the page will appear green

2. How to get the node

1.id

2.class

3. Tag

4. Attribute

The id value should be unique in a page, but when multiple identical ids appear, The style is valid for all id nodes. How to use: # followed by the node id value

<body>
  <p id="id_p">第一个段落</p>
  <p id="id_p">第二个段落</p>
</body>

Copy after login

#id_p {
  color: red;
}

Copy after login

The results show that the text in both paragraphs appears red

1.id relative to class and label It has a higher weight. When the id, class, and label are styled on a node at the same time, the weight of id is the highest

2. When the same id is styled through the link and style tags, the style introduced later Overwrite the previous style

class

Using class can set styles for multiple nodes at the same time, and classes can be superimposed. How to use. Followed by a single class name of the node

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p class-p-2">第二个段落</p>
</body>

Copy after login

.class-p {
  color: red;
}
.class-p-2 {
  color: green;
}

Copy after login

At this time, the first paragraph appears red, and the second paragraph appears green

Adjust html

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p-2 class-p">第二个段落</p><!-- 调换class-p 和 class-p-2 的顺序  -->
</body>

Copy after login

Adjust class- After the positions of p and class-p-2, the page rendering effect remains unchanged. Note: The rendering of class styles has nothing to do with the order of class usage. It is related to the order of class style settings. For class styles with the same weight, in the style settings, the later style settings overwrite the previous style settings

attributes

You can also get the node to be styled through the attributes on the node

<body>
  <p>第一个段落</p>
  <p title="第二个段落的title">第二个段落</p>
</body>

Copy after login

[title] {
  color: red;
}

Copy after login

The second paragraph has a title attribute, so the second paragraph displays red

label

Get the node through the tag name for style setting

<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
</body>

Copy after login

p {
  color: red;
}

Copy after login

All p tag nodes in the page are rendered red

Mixed

The above four methods can be mixed, for The corresponding node is styled. Combination methods include hierarchical nesting, style overlay, node association, etc. In the end, the one with the highest weight will be the final result.

3. Style weight

For the above four methods, for an individual, the id is the highest, the class and attribute are of the same level (the subsequent styles overwrite the previous styles), and the label is the lowest.

When the four methods are used in combination, the weighted result shall prevail. Sort the ids, classes, attributes and label styles that exist on the same node, and the one ranked first will be the final rendering effect. For example: There are multiple types of style settings for node p. First, select all styles with ids, including nested styles. Under the same id, sort another type of style

<body class="body">
  <p id="id_p">第一个段落</p>
</body>

Copy after login

.body #id_p {
  color: red;
}

#id_p {
  color: green
}

Copy after login

Although both style settings have ids, and the green effect is set after red, the same can be obtained by sorting# Under id_p, the previous one exists.body, so the final rendering effect is red

When there are styles of class, attributes and tags, they are sorted in order. Styles of the same type or weight (class and attributes have the same weight), depend on The later style overwrites the previous style (based on the type, not the name), and the one ranked first will be the final rendering effect.

Note:

1. Nesting, overlaying, >, + and other methods will not affect the final effect.

2. :nth-child, :first-child, :last-child and other pseudo-classes are higher than class and attributes

4. !important

!important is the style A special case in , its weight is the highest, higher than id, class, attributes, tags and style attributes

<body class="body" style="background: red"></body>

Copy after login

.body {
  background: green !important;
}

Copy after login

The page rendering effect is green. But when the style settings are sorted, the one with the higher weight of another type will be the final effect under the same type of style. For example

body.body {
  background: blue !important;
}
.body {
  background: green !important;
}

Copy after login

With the same class and !important, the former style setting has a body tag, but the latter style does not, so the final effect appears blue

Explanation

1. Try to avoid using !important. Because !important has the highest weight, it will make mandatory settings for this attribute of the node. Be careful when using it

2. Usage scenarios

When introducing a plug-in, set the plug-in The styles in are strongly overridden. When introducing a plug-in, if you do not want to modify the style code in the plug-in, you can use !important to force override the style attributes in the plug-in
to force override the inline style. For automatically generated or dynamically introduced HTML structures with inline styles, you can use !important to force override the inline styles

1. Workaround

!important is not recommended in many cases. There is a rule in stylelint that prohibits the use of !important. There is a workaround that can achieve an effect similar to !important` in most cases

html

A piece of text

css .body .p .span { color: red; } .span.span.span.span. span {/**Self style overlay **/ color: green; }

Without considering the inline style and id, you can repeatedly overlay your own style and use it multiple times. You can increase the class weight and modify the style. Copy.

Prerequisites for use:

1. There is no inline style style attribute

2. There is no id style

3. The number of times the self-style overlay exceeds the number of nests

Benefits: No need to consider DOM hierarchical relationships, reducing hierarchical nesting

5. Summary

Based on the above description, the calculation of weight basically follows the following rules:

1. Compare by type, the one with the highest type weight will be displayed;

2. Same type, compare by quantity, and the one with more will be displayed;

3. Same quantity, compare in order , the latter shows

nesting usage suggestions

The use of style nesting, in addition to increasing the weight, also reflects a certain structural relationship of the DOM. But nesting is not required in every case.

Nesting is mostly used for unique style settings within blocks. A certain style is only valid within a certain block and can be nested.
When multiple pages are developed at the same time, nesting can be used to avoid overwriting the styles after merging.

The more nesting is used, the better. The more nesting, the greater the weight, but at the same time, the greater the performance consumption of the page. It is recommended to use inheritance and style overlay.

Related recommendations:

Share detailed analysis of CSS priority

css priority issue

Detailed explanation of CSS priority_html/css_WEB-ITnose

The above is the detailed content of Detailed explanation of CSS priority calculation rules. For more information, please follow other related articles on the PHP Chinese website!