CSS优先级计算的底层规则-tutorial css-php.cn

CSS优先级计算的底层规则

php中世界最好的语言

Lepaskan： 2018-03-21 16:53:24

asal

1674 orang telah melayarinya

这次给大家带来CSS优先级计算的底层规则，CSS优先级计算底层规则的注意事项有哪些，下面就是实战案例，一起来看一下。

最近在学习CSS优先级计算的规则这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

CSS的权重

一、CSS的引入方式

1.在节点元素上，使用style属性

2.通过link引入外部文件

3.通过style标签在页面内引入

三种引入方式的区别

index.html文件

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

Salin selepas log masuk

body.css文件

    body {
        background: green;
    }

Salin selepas log masuk

1.第一种方式相对后面两种优先级高，与引入顺序无关无论link和style标签放在head内，还是放在body内，或者放在html标签结尾，页面都会呈现yellow

2.第二种和第三种为平级引入，后引入的样式覆盖之前的引入样式去掉body上的style标签

调整link和style标签的先后顺序。link在前，style标签在后，页面呈现red，相反，页面会呈现green

二、获取节点的方式

1.id

2.class

3.标签

4.属性

id

在一个页面中id值应该是唯一，但是，当出现多个相同id时，样式对所有id节点是有效的，使用方式：#后面跟节点id值

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

Salin selepas log masuk

#id_p {
  color: red;
}

Salin selepas log masuk

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

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

调整html

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

Salin selepas log masuk

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

属性

通过节点上的属性也可以得到要进行样式设置的节点

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

Salin selepas log masuk

[title] {
  color: red;
}

Salin selepas log masuk

第二个段落有title属性，所以第二个段落呈现red

标签

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

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

Salin selepas log masuk

p {
  color: red;
}

Salin selepas log masuk

页面中所有p标签节点呈现red

混合

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

三、样式权重

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

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

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

Salin selepas log masuk

.body #id_p {
  color: red;
}
#id_p {
  color: green
}

Salin selepas log masuk

虽然两种样式设置都有id，并且green效果在red之后被设置，但是通过排序可以得到相同#id_p下，前一个存在.body，所以最终呈现效果为red

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

注意：

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

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

四、!important

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

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

Salin selepas log masuk

.body {
  background: green !important;
}

Salin selepas log masuk

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

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

Salin selepas log masuk

相同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中文网其它相关文章！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

CSS优先级计算的底层规则