今天小编跟大家讲解下有关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>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的某种结构关系。但嵌套并不是在任何情况下都需要的。
嵌套多用于块内独有的样式设置。某种样式仅在某个块内有效 可使用嵌套。 多个页面同时开发时 为避免合并后样式被覆盖 可使用嵌套。嵌套的使用并不是越多越好。嵌套越多 权重越大 但同时对页面的性能消耗也越大。建议使用继承和样式叠加。
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
