选择器权重

最新推荐文章于 2024-08-09 11:34:51 发布
最新推荐文章于 2024-08-09 11:34:51 发布
阅读量114 收藏
点赞数
分类专栏： 学习笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45925906/article/details/115185210
版权
本文深入探讨了CSS中样式的权重计算，解释了如何确定哪个样式生效。以实例展示了继承样式优先级为0，详细分析了不同选择器的权重（ID、类、属性等），并指出在权重为11、20和2的情况下，优先级最高的样式将决定字体颜色。了解这些原理对于优化网页布局和样式控制至关重要。
摘要由CSDN通过智能技术生成

权重和权值列表

在这里插入图片描述
注意一点：继承的样式优先级为0

看一下例题：
在这里插入图片描述
由于h1是继承id为post的属性，所以权重为0
第二个的权重为1+10=11
第三个的权重为10+10=20
第四个的权重为1+1=2
所以样式应该是第三个生效，字体颜色为红色

RunHio
关注
专栏目录
CSS中选择器的权重值的计算
12-14
CSS 选择器权重值 CSS 具有自己的优先级计算方法，而不仅仅是行间>内部>外部、ID>class>元素 1. 样式类型 行间样式 <h1 xss=removed>我的行间CSS样式。</h1> 内联样式 <style type="text/css"> h1{font-size:12px; color:#000; } </style> 外部样式 <link rel="stylesheet" href="css/style.css"> 2. 选择器类型 选择器 栗子 ID #id class .c
CSS中选择器的权重值
weixin_33841503的博客
01-22 288
CSS 具有自己的优先级计算方法，而不仅仅是行间>内部>外部、ID>class>元素 1. 样式类型 行间样式 <h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1> 内联样式 <style type="text/css"> ...
CSS-选择器权重计算
weixin_30267785的博客
01-22 74
权重计算规则 内联样式，如: style=" "，权值为1000。 ID选择器，如：#content，权值为0100。 类，伪类和属性选择器，如.content，权值为0010。 类型选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。 权值越大，权重越高 !important !important...
css选择器（一）--- 权重问题
wind的博客
03-08 344
important 权重10000（最大） 内联 style='' //权重1000（仅次于 !important） ID选择器 #content'' //权重100 类、伪类、属性选择器 权重10 1.类： .content 2 伪类：同一个标签，根据其不同的种状态，有不同的样式。用冒号来表示。比如a标签 a:link{ /*点击之前 */ } a:visited{ /*被访问过之后 */ } a:hover{ /*鼠标悬停 */ } a:ac
css选择器有哪些，选择器的权重的优先级
永不消失的彩虹的博客
01-07 1万+
选择器类型： 1、ID　　#id 2、class　　.class 3、标签　　p 4、通用　　* 5、属性　　[type="text"] 6、伪类　　：hover 7、伪元素　　::first-line 8、子选择器、相邻选择器   权重计算规则： 1、第一等：代表内联样式，如: style=””，权值为1000。 2、第二等：代表ID选择器，如：#content，权值为0100。 3、第三等：...
css选择器权重排序_css选择器的权重计算
weixin_39624360的博客
12-22 1509
首先归纳一下最基本的css优先级。从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。那么样式选择器中又是如何...
CSS——选择器权重、继承、单位
Fan_web的博客
08-09 783
本文承接上一节的分享介绍了选择器的权重，同时希望能够帮助大家理解继承的相关知识，简单地跟大家介绍常见的一些单位。下一篇会着重讲一下CSS的布局。
css选择器 权重优先级,CSS选择器的权重与优先规则
weixin_28676289的博客
08-03 2047
一般而言，大多数前端工程师对css样式优先级的概念停留在如下所示： 注:>表示优先级的一个高低,|表示优先级一样!important>行间样式>id>class|属性>标签选择器>通配符但实际上，css是有一个权重的。且是可也计算的，我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保...
选择器权重1
08-08
当我们遇到"选择器权重1"的话题时，我们实际上是在讨论CSS中如何解决样式冲突的问题，因为不同的选择器可能会对同一个元素设置不同的样式，从而引发冲突。 首先，我们需要理解CSS选择器的优先级，这是一个关键概念...
对CSS选择器权重的认识(亲测)
09-22
CSS选择器权重，又称CSS特异性，是CSS中用于判定不同选择器匹配规则权重的标准。当多个规则应用于同一个HTML元素时，浏览器将根据权重来决定最终哪些规则生效。下面是对CSS选择器权重的详细介绍，以帮助开发者更好地...
CSS选择器权重计算及优先级
04-16
以下是关于CSS选择器权重计算及优先级的详细解释： 首先，我们要了解CSS选择器的四个等级及其对应权重： 1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;...
Css选择器权重排序详解+权重计算
weixin_45230574的博客
11-20 1563
最详细的Css权重详解、权重排序以及如何加强权重
关于post的请求体类型
热门推荐
weixin_45925906的博客
04-06 1万+
文章目录Http请求一、body的类型二、使用步骤1.引入库2.读入数据总结 Http请求 HTTP请求中 header query 和 body的区别 header显而易见是请求头 query是指请求的参数，一般是指URL中？后面的参数 如http://10.6.6.6:8080/api/v1/namespaces?pretty=true中 pretty=true就是query body是指请求体中的数据 前端发送请求最常用的是get请求还有post请求 get请求只能传query参数，query参数
机器学习之数据集
weixin_45925906的博客
02-19 3620
sklearn数据集 sklearn： Python语言的机器学习工具 Scikit-learn包括许多知名的机器学习算法的实现 Scikit-learn文档完善，容易上手，丰富的API sklearn数据集使用： sklearn.datasets 加载获取流行数据集 datasets.load_() 获取小规模数据集，数据包含在datasets里 datasets.fetch_(data_home=None) 获取大规模数据集，需要从网络上下载，函数的第一个参数是data_home，表示数据集下载的目录
Spring(二)之构造函数注入
weixin_45925906的博客
01-17 2542
Spring的构造函数注入 在上一篇文章提到Spring可以降低程序之间的依赖，依靠的是将对象的创建交给Spring。 但是当我的类中无默认的构造函数或是构造函数被覆盖重写，那此时即使我的对象创建了，也无法调用类中的方法。 这篇笔记主要是介绍在Spring中进行构造函数的参数注入，首先我们先将原来是UserServiceImpl的类进行改造，给它一个带参的构造函数，从而覆盖掉原来的默认构造函数 public class UserServiceImpl implements IUserService {
关于typeAliases的使用
weixin_45925906的博客
01-16 1787
关于typeAliases的使用 在Mybatis中的查询时，通常要加上parameterType来指定参数类型，当参数为类时，我们需要全上全限定类名。 当一个类所属的sql语句较多时，每一次都写上全限定类名，会比较麻烦。 于是Mybatis中提供了一个typeAliases标签帮我解决了这个麻烦. typeAliases标签一般写在SqlMapConfig.xml中，也就是配置数据库的xml中，代码如下： <typeAliases> <typeAlias type=
Mybatis之字段匹配问题
weixin_45925906的博客
01-15 1251
Mybatis的字段匹配 在开发中，有时会遇见数据库的字段和实体类中的属性名不一致的情况，这种情况虽然可以用起别名的方法来解决，但这无疑使开发的效率降低。 所以在MyBatis中提供了resultMap的配置。具体代码如下 <!-- 当数据库列名与java实体类中的字段名不一致时，使用该配置 --> <resultMap id="goodsMap" type="com.imis.pojo.Goods"> <!-- 配置主键 -->
IDEA下maven导入依赖很慢解决办法
weixin_45925906的博客
01-18 1230
IDEA下maven导入依赖很慢解决办法 ，最近在重新安装IDEA以后，无论是创建还是导入项目，pom.xml引入依赖的时候下载对应的包的速度都是很慢的，这是因为默认使用国外的镜像，需要手动配置Maven的settings.xml修改为国内的镜像。我自己有时候也会 Step 1：找到配置文件 一般刚安装IDEA是没有这个settings.xml,需要创建，首先在选中pom.xml单击鼠标右键，在最下方找到Maven，然后选择create settings.xml（如果已经创建了则是open settings
css属性选择器权重
最新发布
10-17
在CSS中，属性选择器的权重并不像其他类型的选择器（如ID选择器、类选择器、标签选择器等）那样有明确的优先级顺序。通常，CSS的权重规则包括以下几种： 1. **内联样式**（`style`属性）：权重最高，具有最高的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值