提升class名权重

转载

mob64ca140088a9 2024-07-21 00:28:07

文章标签 提升class名权重 css计算属性 thymeleaf怎么让css的图片生效 css 权重 文章分类 深度学习人工智能

提升class名权重_css计算属性

前言

css 权重想必大家都听说过, 一些简单的规则大部分人也都知道:

较长的 css selector 权重会大于较短的 css selector
id selector 权重高于 class selector

但是具体规范是什么? 浏览器是按照什么标准来判定不同选择器的权重的呢?

按照官方的表述，css优先级如下

！important>行间样式>id选择器>class选择器属性选择器>标签选择器>通配符

内联样式的权重为：          1000
ID选择符的权重为：          0100
类（class）选择符的权重为： 0010
属性选择符的权重为：        0010
类型选择符的权重为：        0001
继承样式的权重为：          0000
通配符选择器：              0000

根据 W3 标准中的规定, css selector 分为 4 种 type: a, b, c, d. 他们的数目计算规则为:

a: 如果 css 属性声明是写在 style=“” 中的, 则数目为 1, 否则为 0
b:
c: class 选择器, 属性选择器(如 type=“text”), 伪类选择器(如: ::hover) 的数目
d: 标签名(如: p, div), 伪类 (如: :before)的数目

在比较不同 css selector 的权重时, 按照 a => b => c => d

由第一个 selector type a 的计算规则可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具有最高的优先级.

而 id selector (b) 相较 class selector (c) 有更高的优先级. 这也和我们平时的经验相吻合

如果 a,b,c,d

默认行为是: 当 specificity 一样时, 最后声明的 css selector 会生效.

这里来做一个测试如果我们重复同样的 css selectory type, 权重会增加吗?

<style type="text/css">
	.repeat.repeat{
		background: red;
	}
	.repeat{
		background: blue;
	}
</style>

<body>
	<div class="repeat">哈喽</div>
</body>

如果重复的 css selector 会被忽略的话, 按照前面的规则, 最后声明的 css selector 会生效, 所以这个 div 节点背景色应该是蓝色. 让我们看看结果:

提升class名权重_权重_02