The underlying rules of CSS priority calculation-CSS Tutorial-php.cn

This time I will bring you the underlying rules of CSS priority calculation, what are the notes of the underlying rules of CSS priority calculation, the following is a practical case, let’s take a look .

Recently, I have been learning the rules of CSS priority calculation. There are quite a lot of knowledge points here, and they are very important, so I will add a few notes today.

The weight of CSS

1. How to introduce CSS

1. In the node element On, 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 , or placed in the body, or placed at the end of the html tag , the page will appear yellow

2. The second and third types are horizontal introductions, and the styles introduced later will overwrite the previous ones. The introduced style removes the style tag 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

id

The id value in a page should be Unique, but when multiple identical ids appear, the style is valid for all id nodes. Usage method: # 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 has a higher weight than class and label. When id, class, and label set styles on a node at the same time, id has the highest weight

2. Through link and style tags When setting styles for the same id, the style introduced later overwrites the previous style

class

Using class can set styles on multiple nodes at the same time, and classes can be superimposed use. 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 appears red

Tag

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 and used to style the corresponding nodes. Combination methods include hierarchical nesting, style overlay, node association, etc. In the end, the one with the highest weight will be used.

3. Style weight

For the above four methods, for an individual, the id is the highest, and the class and attribute are of the same level (the subsequent styles overwrite the previous styles). Label is 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, but by sorting, you can get the previous one under the same #id_p. body, so the final rendering effect is red

存在class、属性和标签的样式时，依次排序，同类型或同权重（class和属性同权重）的样式，靠后的样式覆盖之前的样式（以类型为准，不以名称为准），最终排位第一者为最终呈现效果。

注意：

1.嵌套、叠加、>、 +等方式，不会影响最终效果。

2.:nth-child、:first-child、:last-child等伪类高于class和属性

四、!important

!important为样式中的特例，它的权重为最高，高于id、class、属性、标签以及style属性

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

Copy after login

.body {
  background: green !important;
}

Copy after login

页面呈现效果为green。但是当对样式设置进行排序时，仍然是同类型样式下，以另一类型权重高者为最终效果。例如

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

Copy after login

相同class及!important下，前一种样式设置存在body标签，后一种则没有，所以最终效果呈现blue

说明

1.尽量避免使用!important。因为!important权重最高，会对节点的该属性做强制性设置，在使用时要慎重

2.使用场景

引入插件时，对插件中的样式进行强覆盖。当引入插件时，在不想修改插件中的样式代码情况下，可通过!important对插件内的样式属性进行强制复写
对行内样式进行强覆盖。对于自动生成或者动态引入的的带有行内样式html结构时，可以通过!important对行内样式进行强制复写

1.变通

!important在很多时候是不建议使用的，在stylelint中有一项规则即禁止使用!important。有一种变通的方式，可以在多数情况下实现类似!important`的效果

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; }

在不考虑行内样式和id的情况下，对自身样式进行重复叠加多次使用，可以增加class权重，对样式进行复写。

使用前提：

1.没有行内样式style属性

2.没有id样式

3.自身样式叠加次数多余嵌套个数

好处：不用考虑DOM层级关系，减少层级嵌套

五、总结

综合以上说明，权重的计算基本遵从以下规则：

1.按类型比对，类型权重高者显示；

2.同类型，按数量比对，多者显示；

3.同数量，按先后顺序比对，后者显示

嵌套的使用建议

样式嵌套使用，除了增加权重外，也体现了DOM的某种结构关系。但嵌套并不是在任何情况下都需要的。

嵌套多用于块内独有的样式设置。某种样式仅在某个块内有效，可使用嵌套。
多个页面同时开发时，为避免合并后样式被覆盖，可使用嵌套。

嵌套的使用并不是越多越好。嵌套越多，权重越大，但同时对页面的性能消耗也越大。建议使用继承和样式叠加。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！