CSS标签的权重优先级

水深无声 2023-06-17 10:54 40阅读 0赞

优先级身为CSS中的三大特性之一，可以说是非常重要的。当我们给本标签的样式或者他的类名、ID以及他的父级上的样式上规定了一样的属性，那么该标签在页面上按照谁规定的来显示？这需要分两种情况分析。

## 选择器相同 ##

这种情况下，就需要我们了解下CSS的另一个特性----层叠性

层叠性：重复出现的style属性，就近原则，谁离得标签近，就最后显示谁的style属性

## 选择器不同 ##

**当标签选择器单独出现时**

当选择器不同时，就需要看优先级原则

优先级从高到底显示

!important>行内样式表>id选择器>类选择器>标签选择器>继承

**当标签选择器出现多个叠加现象**

例如这种有id选择器、类选择器、标签选择器和继承相互结合的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5namlhYmFvNTU1NQ_size_16_color_FFFFFF_t_70][]

那就根据这个表进行权重叠加，谁的权重大就执行谁

![20191128214109957.png][]

需要注意下面几点

1.权重相加不会出现进位的现象。即便是0，0，0，1000那优先级也比0，0，1，0小

2.不管复合选择器中父类权重多高，即便是!important，在要复合选择器中没有选中自己的标签，则那么他就是继承，则权重为0。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5namlhYmFvNTU1NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191128214004869.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5namlhYmFvNTU1NQ==,size_16,color_FFFFFF,t_70
[20191128214109957.png]: https://img-blog.csdnimg.cn/20191128214109957.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css权重(css权重优先级)

什么是权重，权数？在数学方面，表示某个数据出现的频率、次数叫权重或者权数。 ![css权重(css权重优先级)\_css权重(css权重优先级)][css_css_c

待我称王封你为后i/ 2023年09月26日 13:16/ 0 赞/ 39 阅读

相关 CSS标签的权重优先级

优先级身为CSS中的三大特性之一，可以说是非常重要的。当我们给本标签的样式或者他的类名、ID以及他的父级上的样式上规定了一样的属性，那么该标签在页面上按照谁规定的来显示？这需要

水深无声/ 2023年06月17日 10:54/ 0 赞/ 41 阅读

相关 CSS权重值计算和选择器优先级

一、权重的值计算以及选择器权重值大小 1、!important放在样式的最后面是最优先的，权重值是10000； 2、内联样式权重值1000，优先级仅次于！important

我会带着你远行/ 2023年06月09日 12:30/ 0 赞/ 33 阅读

相关谈谈CSS选择器优先级和!important权重

![format_png][] 来源 | https://www.html.cn/web/css/19897.html CSS中的选择器优先级与!import

喜欢ヅ旅行/ 2022年12月22日 11:16/ 0 赞/ 162 阅读

相关 CSS的元素优先级和权重

<table> <thead> <tr> <th>继承和</th> <th>0.0.0.0</th> </tr> </thead> <t

た入场券/ 2022年12月01日 11:59/ 0 赞/ 220 阅读

相关 CSS基础：谈谈选择器的权重和优先级

你必须懂的css样式权重和优先级问题：选择器的权重与优先级有什么关系？一、什么是权重？先来看下面这样两段代码，大家分析`class="c"`的标签内文字的颜

╰半夏微凉°/ 2022年10月31日 00:54/ 0 赞/ 206 阅读

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

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

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

相关 CSS选择器的权重及优先级

最近在牛客网上刷题遇到过各类选择器优先级的比较问题，经查阅，现总结如下：总体来说：内联样式 > id>class=属性选择器=伪类选择器=伪元素选择器>标签，大致分为四个等

r囧r小猫/ 2022年05月30日 05:40/ 0 赞/ 365 阅读

相关 CSS初级：CSS的引入，选择器的优先级和权重

<!--html+css 补充知识点：浏览器内核：主流浏览器：有市场份额+有自己的内核浏览器=shell(外形)+内核 IE：trident Chrome：Web

电玩女神/ 2021年11月11日 21:50/ 0 赞/ 395 阅读

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

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

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