CSS优先级计算的规则

时间：2017-08-16

最近在学习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>

body.css文件

    body {
        background: green;
    }

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>

#id_p {
  color: red;
}

结果显示，两个段落中的文字都呈现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>

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

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

调整html

<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

混合

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

三、样式权重

以上四种方式，针对单个而言，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

共2页:

上一篇1/2

上一篇：浅谈CSS3特性查询（Feature Query: @supports）功能简介 下一篇：css3旋转木马_动力节点Java学院整理

CSS优先级计算的规则

相关文章

最新文章