蝙蝠岛资源网

CSS优先级计算的规则
网页制作 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

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

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

注意：  

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

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

四、!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对行内样式进行强制复写

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的某种结构关系。但嵌套并不是在任何情况下都需要的。

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
css规则优先级,CSS优先级计算
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“CSS优先级计算的规则”

暂无CSS优先级计算的规则的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com