html中权重等级

最新推荐文章于 2021-06-29 17:36:21 发布
最新推荐文章于 2021-06-29 17:36:21 发布
阅读量5.7k 收藏 5
点赞数 3
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43883666/article/details/100559709
版权 
1. !important,加在样式属性值后，权重值为10000
2. 内联样式，如：style=""，权重值为1000
3. ID选择器，如：# content权重为100
4. 类，伪类，属性选择器如：content、：hover权值为10
5. 标签选择器和伪元素选择器，如：div、p、：before权值为1
6. 通用选择器(*)、子类选择器(>)、相邻选择器(+)、同胞选择器(~)权值为0
爱你三千遍s
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-！important提升权重用法
zsr0526的博客
06-08 1万+
页面严禁滥用!important提升权重，只能在原子类的情况使用！且不影响继承性和就近原则。
优先级中的important和权重问题
weixin_42834788的博客
07-18 1374
一、important问题 1.什么是!important 作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高 注意点: 1.!important只能用于直接选中, 不能用于间接选中 2.通配符选择器选中的标签也是直接选中的 3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 4.!important必须写在属...
如何和何时使用 CSS 的权重设置 !important （建议：永不使用！）
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-29 7550
特别声明：此篇文章由David根据Louis Lazaris的英文文章原名《!important CSS Declarations: How and When to Use Them》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2010/11/02/the...
CSS之定位详解
weixin_49855251的博客
02-03 244
文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 关于定位 我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父
html内容权重计算,HTML CSS 选择器权重计算规则
weixin_28754395的博客
06-09 646
其实，CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。一、样式类型1、行间我的行间CSS样式。2、内联h1{font-size:12px;color:#000;}3、外部二、选择器类型1、ID　　#id2、class　　.class3、标签　　p4、通用　　*5、属性　　[type="text"]6、伪类　　：hover7、伪元素　　:...
Java-当条件满足时，跳出多重循环
Dengxxxx的博客
09-21 995
方法1-Lable标签 Lable标签定义：XXXX: Program Examlpe： class Solution { public int findRepeatNumber(int[] nums) { int n=-1; lableA:for(int i=0;i<nums.length-1;i++){ for(int j=i+1;j<=nums.length-1;j++){ if(nums[i
CSS中选择器的权重值的计算
12-14
权重计算遵循从左到右的逐级比较原则，即先比较每个等级的数值，如果前一级相同，则比较下一级。例如，1,0,0,0大于0,99,99,99。值得注意的是，继承的样式不具有权重，因此在有具体权重的选择器出现时，它们会被覆盖...
CSS选择器权重计算及优先级
04-16
1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;">`。 2. **ID选择器**（权重100）：每个ID选择器如`#myId`贡献100的权重。 3. **类选择器、伪类和属性...
html+css笔记总结
11-06
1. **HTML元素**: HTML由一系列的元素组成，每个元素都有其特定的含义，比如`<p>`代表段落，`<h1>`到`<h6>`代表标题等级。 2. **标签对**: 大多数HTML元素都是成对出现的，如`<div>`和`</div>`，包围着要处理的内容...
htmlcss-wp
02-16
在"htmlcss-wp"中，可能包含有关响应式设计的内容，这是为了让网页在不同设备上都能良好显示。通过媒体查询（media queries）和流体布局，我们可以根据设备的视口宽度调整样式，实现自适应效果。 六、实战演练 ...
HTML标签权重分析及页面优化
11-24
HTML标签权重分值排列，页面容量的合理化，HTML标签权重分析,页面优化
html-css-memory
02-15
HTML元素通过标签来表示不同的内容，如`<head>`用于头部信息，`<body>`包含页面主体，`<h1>`至`<h6>`定义标题等级，`<p>`用于段落，`<a>`创建链接，`<img>`插入图片等。理解这些基本标签及其用法是每个前端开发者...
css 删除线_css — 权重、继承性、排版、float
weixin_39852276的博客
11-29 161
1. 继承性继承性：在css有某些属性是可以继承下来，如 color,text-xxx,line-height,font-xxx,letter-spacing,word-spacing是可以继承下来，但有些属性是不可以继承下来的，如 border:1px solid green;2. css中的权重继承来的属性权重值约为0权重比较规则:如果选中了标签：1.数选择器数量： id 类 标签 ，谁大它的...
html中权重的计算
qq_45411328的博客
07-05 1032
html中权重的计算规则 在HTML中对一个元素的相同属性可能在不同的地方会赋不同的值那么这个元素最终的表现形式会如何呢规则如下 一.比较重要性 重要性从高到低 1.作者样式表中的！important样式（带有！important的样式优先级非常高打破默认的优先规则） 2.作者样式表中的普通样式 3.浏览器默认样式表的样式 二.比较特殊性 选择器的优先级 总结出来的规则：选择器选中的范围越窄，越特殊。 具体规范：通过选择器计算出一个4位数（x x x x）这里四位数不是逢十进一 千位：如果是内联样式，纪委1
CSS的!important属性修改权重
weixin_45856470的博客
05-12 1553
最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式。按照常理来说，越是灵活的东西，需要做的工作就会更多所以就写一篇博客梳理下!important属性。 1.定义及语法 语法格式：{ cssRule !importan}，例如：box{color:red !important;}。 作用：提高指定样式规则的应用优先权（优先级）在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。 2.浏览器识别
html css控制优先级,css权重及优先级问题_html/css_WEB-ITnose
weixin_32927133的博客
06-29 181
css权重及优先级问题几个值的对比初始值指定值计算值应用值CSS属性的 指定值 (specified value)会通过下面3种途径取得： 在当前文档的样式表中给这个属性赋的值，会被优先使用。如果在当前文档的样式表中没有给这个属性赋值，那么它会尝试从父元素那继承一个值。如果上面的两种途径都不可行，则把CSS规范中针对这个元素的这个属性的初始值作为指定值应用值(used value)是完成所有...
html选择器优先级如何计算,CSS选择器权重计算与优先级
weixin_35728636的博客
06-05 3738
CSS选择器权重计算与优先级选择器有优先级，可以通过权重来计算优先级。一：优先级等级划分：第一优先级：css属性+!important是一种强制改变优先级的方法，它会覆盖页面内任何位置定义的元素样式，它拥有最高优先级。第二优先级：在html中给元素标签加style，即内联样式。第三优先级：由id选择器来定义。例如，#id{ }会覆盖.classname{ }第四优先级：由class选择器、属性选择...
谈谈CSS选择器优先级和!important权重
web前端开发
11-16 1087
来源 |https://www.html.cn/web/css/19897.htmlCSS中的选择器优先级与!important权重.class选择器要高于标签选择器。#id选择器要高...
css 权重及！important
热门推荐
林中路
10-10 2万+
在编写css样式的时候，我们会时常碰到自己写的样式没有生效，尤其是引用一些外部框架的时候，这种情况更容易发生。CSS样式的优先级按照官方的表述，css优先级如下： 通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式 举例：例如以下代码：index.html<!DOCTYPE html> <html> <head lang="en">
html权重的计算方法
最新发布
08-10
HTML权重的计算方法是根据选择器的特殊性和重要性来确定的。特殊性是指选择器选中的范围越窄、越特殊，而重要性是指通过!important声明的样式具有最高的优先级。权重计算方法如下： 1. 首先计算选择器中的特殊性： - 内联样式具有最高的特殊性，记为千位数为1，否则为0。 - 百位数等于选择器中id选择器(#id标记的选择器)的数量。 - 十位数等于选择器中类选择器(.class标记的选择器)、属性选择器和伪类选择器的数量。 - 个位数等于选择器中选择器和伪元素选择器的数量。 2. 然后比较选择器之间的重要性： - 有!important声明的样式具有最高的重要性，优先级非常高，打破默认的优先规则。 - 作者样式表中的普通样式次之。 - 浏览器默认样式表的样式具有最低的重要性。 最终，将特殊性和重要性的值按顺序连接起来形成一个四位数，该数值即为选择器的权重。如果两个选择器的权重值相同，则采取“就近原则”。 例如，对于以下的HTML结构和CSS样式： ```html <style> a { /* 0001 */ color: red; } div ul a { /* 0003 */ color: orange; } #mydiv #mylist .mylink { /* 0210 */ color: chartreuse; } #mydiv #mylist a:link { /* 0211 */ color: black; } </style> </head> <body> <div id="mydiv"> <ul id="mylist"> <li class="l" id="myLi"> <a href="#" class="mylink"> 权重的计算 </a> </li> </ul> </div> </body> </html> ``` 根据权重计算方法，可以得出以下结论： - 第一个选择器`a`的权重为0001。 - 第二个选择器`div ul a`的权重为0003。 - 第三个选择器`#mydiv #mylist .mylink`的权重为0210。 - 第四个选择器`#mydiv #mylist a:link`的权重为0211。 因此，在这个例子中，最终应用的样式是`#mydiv #mylist a:link`选择器定义的样式，颜色为黑色。123 #### 引用[.reference_title] - *1* *3* [CSS选择器优先级以及权重计算方法](https://blog.csdn.net/quan44444/article/details/120287563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [html中权重的计算](https://blog.csdn.net/qq_45411328/article/details/107135239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值