前端杂谈: CSS 权重 (Specificity)

àì夳堔傛蜴生んèń 2022-04-15 02:26 172阅读 0赞

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

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

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

让我们来看一下[官方文档][Link 1]是怎么说的~

### 第一个关键词: ***Specificity*** ###

> **Specificity** is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of [CSS selectors][]

官方文档中用 **Specificity: 特异性** 来表示一个 css selector 和其元素的相关性. 相关性越强, 即表示表示其权重最高.

那么问题来了, *Specificity* 是如何被比较的呢?

> Specificity is a weight that is applied to a given CSS declaration, determined by the number of each [selector type][] in the matching selector.

Specificity 是由 selector 中 不同 **selector type** 的数目决定的.

### 第二个关键词: *Selector Type* ###

*[原文链接][Link 2]*

[Link 1]: https://www.w3.org/TR/CSS2/cascade.html#specificity
[CSS selectors]: https://developer.mozilla.org/en/CSS/CSS_Reference#Selectors
[selector type]: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types
[Link 2]: http://click.aliyun.com/m/1000024955/

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 css权重

css权重 !important

你的名字/ 2022年10月09日 00:37/ 0 赞/ 209 阅读

相关 CSS权重

> 编辑推荐： [掘金][Link 1]是一个高质量的技术社区，从 CSS 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。 [点击链接][Link

今天药忘吃喽~/ 2022年09月29日 14:54/ 0 赞/ 231 阅读

相关【CSS】css特殊性-优先级-权重

注：文章来源：《css权威指南》第三章。部分未予记录 css选择器可以用多种方式去选择元素，实际上一个元素可以由使用两个或者多个规则来匹配，每个规则都有各自的选择器。请看

古城微笑少年丶/ 2022年09月26日 14:54/ 0 赞/ 261 阅读

相关 css选择器权重

第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：\content，权值为100。第三等：代表类，伪类和属性选择器，如 .c

矫情吗；*/ 2022年06月13日 05:58/ 0 赞/ 245 阅读

相关 css权重

!important Infinity 行间样式 1000(256进制) id 100

柔光的暖阳◎/ 2022年06月05日 09:47/ 0 赞/ 266 阅读

相关 css 权重及！important

转载于：[https://blog.csdn.net/hjb2722404/article/details/49021955][https_blog.csdn.net_hjb2

港控/mmm°/ 2022年05月24日 14:12/ 0 赞/ 278 阅读

相关前端杂谈: CSS 权重 (Specificity)

css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css selector 权重会大于较短的 css selector id select

àì夳堔傛蜴生んèń/ 2022年04月15日 02:26/ 0 赞/ 173 阅读

相关深入css权重计算

\- 1.千位:如果是内联样式,记为1,否则为0 \- 2.百位:等于选择器中所有id选择器的数量 \- 3.十位:等于选择器中所有类选择器,属性选择器,伪类选择器的数

你的名字/ 2021年11月17日 23:58/ 0 赞/ 393 阅读

相关 css 权重、权值（标签优先级）

css 权重、权值（标签优先级）！important 最高行内：1000 id:100 class:10 tag:1 \box>div\{\}=>

缺乏、安全感/ 2021年07月26日 02:48/ 0 赞/ 500 阅读

相关 css权重是什么？css权重的介绍

1、什么是css权重？css6大基础选择器 - css权重指的是css6大基础选择符的优先级，优先级高的css样式会覆盖优先级底的css样式，优先级越高说明权重越高，反...

红太狼/ 2021年01月30日 16:23/ 0 赞/ 796 阅读