CSS优先级计算

时间  2019-11-10
标签 css 优先级 计算 栏目 CSS 繁體版
原文   原文链接

CSS的权重

1、CSS的引入方式

  1. 在节点元素上，使用style属性
  2. 经过link引入外部文件
  3. 经过style标签在页面内引入
三种引入方式的区别

index.html文件css

<!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>

body.css文件html

body {
        background: green;
    }
  1. 第一种方式相对后面两种优先级高，与引入顺序无关
    • 不管link和style标签放在head内，仍是放在body内，或者放在html标签结尾，页面都会呈现yellow
  2. 第二种和第三种为平级引入，后引入的样式覆盖以前的引入样式
    • 去掉body上的style标签
    • 调整link和style标签的前后顺序。link在前，style标签在后，页面呈现red，相反，页面会呈现green

2、获取节点的方式

  1. id
  2. class
  3. 标签
  4. 属性
id

在一个页面中id值应该是惟一，可是，当出现多个相同id时，样式对全部id节点是有效的，使用方式：#后面跟节点id值性能

<body>
  <p id="id_p">第一个段落</p>
  <p id="id_p">第二个段落</p>
</body>
#id_p {
  color: red;
}

结果显示，两个段落中的文字都呈现redspa

  1. id相对class和标签具备更高的权重，当id和class、标签同时对一个节点设置样式时，id的权重为最高
  2. 经过link和style标签对同一个id设置样式时，后引入的样式覆盖以前的样式
class

使用class能够对多个节点同时设置样式，而且能够叠加class使用。使用方式.后面跟节点单个class名插件

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p class-p-2">第二个段落</p>
</body>
.class-p {
  color: red;
}
.class-p-2 {
  color: green;
}

此时，第一个段落呈现red，第二个段落呈现greencode

调整htmlhtm

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

调整class-p和class-p-2的位置后，页面呈现效果不变。说明：class样式的渲染和class的使用顺序无关，与class样式设置的前后顺序有关，同权重的class样式，在样式设置中，靠后的样式设置覆盖以前的样式设置排序

属性

经过节点上的属性也能够获得要进行样式设置的节点继承

<body>
  <p>第一个段落</p>
  <p title="第二个段落的title">第二个段落</p>
</body>
[title] {
  color: red;
}

第二个段落有title属性，因此第二个段落呈现red开发

标签

经过标签名获取节点进行样式设置

<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
</body>
p {
  color: red;
}

页面中全部p标签节点呈现red

混合

以上四种方式能够混合使用，对相应的节点进行样式设置。结合方式包括层级嵌套、样式叠加、节点关联等。最终以权重高者为呈现效果。

3、样式权重

以上四种方式，针对单个而言，id最高，class和属性同级（后面的样式覆盖以前的样式），标签最低。

当四种方式混合使用时，则以权重的结果为准。对同一结点存在的id、class、属性和标签样式进行排序，排位第一者为最终呈现效果。例如：对于节点p存在多种类型的样式设置，首先挑选全部带id的样式，包括嵌套样式。相同id下，对另外一类型样式进行排序

<body class="body">
  <p id="id_p">第一个段落</p>
</body>
.body #id_p {
  color: red;
}

#id_p {
  color: green
}

虽然两种样式设置都有id，而且green效果在red以后被设置，可是经过排序能够获得相同#id_p下，前一个存在.body，因此最终呈现效果为red

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

注意：

  1. 嵌套、叠加、>、 +等方式，不会影响最终效果。
  2. :nth-child、:first-child、:last-child等伪类高于class和属性

4、!important

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

<body class="body" style="background: red"></body>
.body {
  background: green !important;
}

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

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

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

说明

  1. 尽可能避免使用!important。由于!important权重最高，会对节点的该属性作强制性设置，在使用时要慎重

  2. 使用场景
    • 引入插件时，对插件中的样式进行强覆盖。当引入插件时，在不想修改插件中的样式代码状况下，可经过!important对插件内的样式属性进行强制复写
    • 对行内样式进行强覆盖。对于自动生成或者动态引入的的带有行内样式html结构时，能够经过!important对行内样式进行强制复写

  3. 变通

    !important在不少时候是不建议使用的，在stylelint中有一项规则即禁止使用!important。有一种变通的方式，能够在多数状况下实现相似!important`的效果

    <body class="body">
  <p class="p">
    <span class="span">一段文本</span>
  </p>
</body>
    .body .p .span {
  color: red;
}
.span.span.span.span.span {/** 自身样式叠加 **/
  color: green;
}

    在不考虑行内样式和id的状况下，对自身样式进行重复叠加屡次使用，能够增长class权重，对样式进行复写。

    使用前提：

    1. 没有行内样式style属性
    2. 没有id样式
    3. 自身样式叠加次数多余嵌套个数

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

5、总结

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

  1. 按类型比对，类型权重高者显示；
  2. 同类型，按数量比对，多者显示；
  3. 同数量，按前后顺序比对，后者显示

嵌套的使用建议

样式嵌套使用，除了增长权重外，也体现了DOM的某种结构关系。但嵌套并非在任何状况下都须要的。

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程