css权重的问题

最新推荐文章于 2022-09-18 17:10:00 发布
最新推荐文章于 2022-09-18 17:10:00 发布
阅读量164 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41440480/article/details/94489044
版权

权重

0 0 0 0
从低位到高位依次是
标签选择器—>类选择器，伪类选择器—>ID选择器—>内联样式表—>!important
跨优先级的和顺序无关，优先级相同的遵循就近原则
跨优先级和顺序无关，意思是，比如说id选择器和类选择器同时给一个标签设置样式，那么无论id选择器在类选择器的前面还是后面，都是id选择器对样式的设置起作用，因为id选择器的权重高。

权重叠加

div ul li → 0001 0001 0001 叠加后 0003
.nav ul li → 0010 0001 0001 叠加后 0012
a:hover → 0001 0010 叠加后 0011
.nav a → 0010 0001 叠加后 0011
#nav p → 0100 0001 叠加后 0101

注意各位之间没有进制

继承的权重为0

代码演示：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

zl1016xixi
关注
专栏目录
CSS的权重问题
input_form_value的博客
03-31 255
1.html5新增元素属性 2.HTML废除的标签 3.CSS高级选择器 3.1 first-of-type 选择属性其父元素的首个<p>元素的每个<p>元素 3.2 last-of-type 选择属性其父元素的最后<p>元素的每个<p>元素 3.3 only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 3.4first-childlast-chi...
初学HTML5——CSS权重问题
一霏的博客
07-17 913
CSS中常见的选择器： 标签选择器 例如：<h1></h1> <p></p> ... 类选择器 class = " " ID选择器 id = " " 比较权重：谁的权重大就用谁的定义的样式 1.如果权重一样，按照编译顺序从上自下。谁最后定义的就用谁的样式 ...
CSS权重问题
weixin_45441470的博客
02-28 893
What：什么是CSS权重 CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。 权重的等级 可以把样式的应用方式分为几个等级，按照等级来计算权重 1、!important，加在样式属性值后，权重值为 10000 2、内联样式（在标签里），如：<p style=””></p>，权重值为1000 3、ID选择器，如：#content，权重值为100 4、类(class)，伪类和属性选择器，
css的选择器权重问题
lxw621的博客
09-18 255
权重为0的有 继承和*权重为1的有元素选择器权重为10的有类选择器(class），和伪类选择器权重为100的有ID选择器权重为1000的有行内样式 style权重最大 无敌的有!important (重要的)
问题：CSS样式引入方法以及CSS权重分配问题.........
zhangq0123的博客
11-09 2489
一、CSS样式引入方法 网页引入css样式的几种方法，包括内联式样式表、嵌入式样式表、外链式、导入式 1.内联式样式表：直接写在现有的元素标签中，比如： www.jb51.net 2.嵌入式样式表：使用标签嵌入到HTML文件的头部中标记中，如：       p{font-size:18px; color:#093;} 3.外链式：使用标签调用CSS文件（开发中用这种方式），如;
CSS选择器的权重问题
zheng_pika的博客
12-21 4411
css选择器的优先级，谁的优先级更高，不仅要看选择器还需要看权重 要学会计算权重才能更好的引用想要的样式
CSS权重
m0_51207602的博客
02-05 4752
CSS权重 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。 当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。 如果两个选择器同时作用到一个元素上，权重高者生效。 权重记忆口诀： 1.从0开始，一个行内样式+1000 2.一个id选择器+100 3.一个属性选择器、class或者伪类+10 4.一个元素选择
css权重
LIANG_XJT的博客
06-08 2640
css权重 css权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，也就是说同一个元素设置多条样式，谁的权重越高那么就那一条对元素起作用，如果权重相同，那么后写的元素就会覆盖前面的写的样式。 下面我们把样式的应用分为几个等级，按照等级来计算权重 1、（！important） 通过图片我们可以发现，原本是蓝色背景的div被它前面设置的样式覆盖掉了，这是因为我在样式属性值后加上了！impor...
css选择器与权重问题——三、权重问题
my__road的博客
07-23 932
除了浮动之外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间，你需要了解浏览器是怎样解析你的代码的。为了完成这个目标，你需要对权重是如何工作的，有一个清楚的认识。很多Css出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。 Css权重问题并不简单，而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题，我相信如果你喜欢星球大战的话你肯定会理解这些概念的~ 我们将会讨
Css选择器权重问题
CodeJR
06-06 2119
Css选择器权重问题我们都知道，在利用HTML+CSS开发网站的时候，CSS的选择器有很多种，例如：行间样式，ID选择器，class类选择器，标签选择器等等，但是当一个标签包含多种选择器时，有作用的究竟是哪个选择器呢？例如以下代码：&lt;html&gt; &lt;head&gt; &lt;title&gt;CSS权重&lt;/title&gt; &lt;style&gt; div{      ...
CSS3中选择器的权重问题
Jsy_997的博客
03-31 672
CSS3中的选择器权重问题。最后面写的样式也可能因为权重低的问题，而不能覆盖之前的样式。
css 权重及！important
热门推荐
林中路
10-10 2万+
在编写css样式的时候，我们会时常碰到自己写的样式没有生效，尤其是引用一些外部框架的时候，这种情况更容易发生。CSS样式的优先级按照官方的表述，css优先级如下： 通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式 举例：例如以下代码：index.html<!DOCTYPE html> <html> <head lang="en">
js中css权重问题
zhangsan777的博客
07-23 2201
因文中涉及权重较多，数据更新时 将css样式进行了覆盖 可用下列方式进行加上权重 $(".missionBox:nth-child(5) .Gifimg").css("cssText","width:22% !important");
CSS 权重问题
你的博客
08-20 805
权重等级 行内内嵌样式 行内样式包含在你的 html 标签中 对你的元素产生直接作用，权重最大，但是不能声明伪类样式 &lt;div style="position:absolute;color:red;"&gt;test&lt;/div&gt; ID 选择器 ID 一般用来作为元素的唯一标识，权重第二 类选择器、属性选择器、伪类选择器 属性选择器：针对标签中的属性的选择器（这个形容有点...
css行内（块）元素之间默认间距问题
weixin_41440480的博客
07-01 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
CSS选择器权重解析与实战问题探讨
"CSS权重关系及问题剖析" 在CSS（层叠样式表）中，选择器的权重决定了哪个样式会应用于特定的HTML元素。权重是由选择器的类型决定的，包括ID选择器、类选择器、属性选择器和标签选择器等。理解权重关系对于解决CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值