请描述css的权重计算规则

最新推荐文章于 2024-06-11 00:00:00 发布
最新推荐文章于 2024-06-11 00:00:00 发布
阅读量92 收藏
点赞数
分类专栏： 每日专栏 CSS3 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38290251/article/details/130492748
版权

一般的权重规则如下：

!important (正无穷) > 内联样式(1000) > #id(100) > .class(10) > tag(1) > *(0)

伪类和属性选择器([type='xxx']) 的权重与 class 相同；

伪元素的权重与 tag 相同。

权重从左往右进行比较，只有前一级相等时才会向后比较。

当权重相同时，靠后的样式会覆盖靠前的样式（这里的靠后是 CSS 文件中的顺序，不是 class 中的顺序）

小草莓蹦蹦跳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS权重规则
qq_27149185的博客
02-23 364
在计算权重之前首先必须有以下基础： 一、样式类型：行间（行内） 样式，内联（内部）样式，（外联）外部样式。 二、选择器的类型：id,class,标签，属性，*，伪类，伪元素，后代选择器，子类选择器，相邻选择器 权重计算规则： 1、第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。 2、第一等：内联样式，如：sty...
css权重规则
weixin_30556959的博客
08-21 359
css权重规则 1. 权重规则：HTML标签权重是1，class的权重是10，id的权重是1002. 例：P的权重是1，"strong.demo"的权重是10+1=11，"#test.red"的权重是100+10=1103. 当不同选择符的样式设置...
浅谈CSS权重计算规则
BradenHan的专栏
06-11 648
TOC/TOC。
CSS的权重规则
qq_44833743的博客
09-11 211
权重规则 行内样式>ID>class，类属性值>标签,伪元素>*（通配） 规则 权重 行内样式 1000 ID 0100 class，类属性值 0010 标签,伪元素 0001 * 0000 相同权重的规则应用排在最后的。 !important 强制提升权重 子元素可以继承父元素设置的样式。继承的规则没有权重 继承没有权重。会使用了 * 权重为0的规则。 ...
css 权重规则
fu_361的专栏
03-28 608
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如: 0,0,0,0 选择器中给定的各个元素和伪元素,加 0,0,0,1 选择器中给定的各个类属性值、属性选择或伪类,加   0,0,1,0 选择其中给定各个ID属性值,加  0,1,0,0 结合符和通配选择器 对特殊性 没有任何贡献,换句话说,其特殊性 为 0,0,0,0 内联样式,加 1,0,0,0 h1{col
cssDemo
03-10
7. **CSS权重**: 理解CSS选择器的权重（importance）是避免样式冲突的关键。权重由组合选择器的类型决定，计算包括ID、类、标签和内联样式。 8. **CSS重置/normalize**: 为了消除浏览器之间的样式差异，开发者通常...
狼人杀-css网页设计
06-20
合理使用CSS权重、避免使用通配符选择器、减少不必要的重绘和回流，以及合理组织和压缩CSS代码，都能有效地提升网页的性能。 综上所述，"狼人杀-css网页设计"涵盖了CSS的基本概念、布局技巧、视觉设计、动态效果、...
CSS3.0.rar_css3.0
09-23
important`来强制应用某个样式，以及通过权重计算来决定样式优先级。 ### 3. 盒模型改进 CSS3.0对盒模型进行了改进，提供了两种模型：`content-box`（标准盒模型）和`border-box`（IE盒模型）。`box-sizing`属性...
css secret demo
08-05
6. **CSS calc()函数**：这个函数允许在计算值时进行动态计算，例如计算元素宽度为父元素宽度减去一定像素值。 7. **CSS单位的秘密**：除了常规的像素单位，还有相对单位如em、rem、vh、vw、%等，它们根据上下文...
CSS训练营
02-25
15. ** calc() 函数**：CSS的calc()函数可用于计算长度、频率、角度、时间、百分比、数值等值，常用于动态计算元素的大小。 通过“CSS训练营”，你将有机会实践这些概念，并不断提升你的CSS技能，使你能够构建美观...
[css] 请描述css的权重计算规则
歌谣的博客
02-24 1283
[css] 请描述css的权重计算规则 权重值计算 选择器 案例 权重值 !important !important Infinity 内联样式 style="…" 1000 ID #id 100 class .class 10 属性 [type=‘text’] 10 伪类 :hover 10 标签 p 1 伪元素 ::first-line 1 相邻选择器、子代选择器、通配符 * > + 0 比较规则 1000>100。也就是说从左往右逐个等级比较，前一
css样式权重计算规则,CSS 选择器权重计算规则详解
weixin_31289551的博客
08-04 984
CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式ID>class>元素一、样式类型1、行间我是行间CSS样式。2、内联h1{font-size:20px;color:#123;}3、外部二、选择器类型ID　　#idclass　　.class标签　　p通用　　*属性　　[type="text"]伪类　　：hover伪元素　　::first-line子选择器、相邻选...
css 权重
gumi123的专栏
05-01 583
权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。 如果两个选择器作用在同一元素上，则权重高者生效。
CSS权重计算规则
YiYing's sharing
07-04 892
最近准备校招生的培训材料，关于CSS的权重计算规则，正好梳理了一下，顺便整理分享出来。 规则 CSS的权重计算有如下几类： 类型 权值 第一等：!important，优先级最高 10000 第二等：内联选择器，如style=“” 1000 第三等：ID选择器，如#container 0100 第四等：类、伪类、属性选择器，权值0010 0010 第五等：元素选择器，如div p，权值0001 0001 第六等：通配符，子选择器，相邻选择器 0000 第七等：继承样式无
css权重机制,CSS权重及其计算
weixin_32601635的博客
08-03 3544
CSS权重及其计算：每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。如果你不了解CSS权重，写CSS代码的过程中使用各种选择器时，你不知道哪个选择器的优先级高，哪个选择器的优先级低，就只能最原始最粗俗的方式是“死记硬背”，但如果理解了CSS权重后，会事半功倍！！！选择器优先原则：!important ...
CSS 之层叠规则（权级、权重、顺序）详解
两个月亮
02-26 1545
CSS 是一系列的样式声明，当多个 CSS 片段对同一目标的同一CSS 属性进行赋值操作时，将发生冲突。CSS 层叠提出了一系列规则，它决定了如何解决冲突，是 CSS 语言的基础。首先，你将使用 CSS 层叠规则中的 权级规则对声明的优先级进行判断。在判断无果后，你将使用权重规则对声明的优先级进行判断。若仍旧没有结果，那么你将使用顺序规则对声明的优先级进行判断。
CSS权重
m0_51207602的博客
02-05 4676
CSS权重 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。 当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。 如果两个选择器同时作用到一个元素上，权重高者生效。 权重记忆口诀： 1.从0开始，一个行内样式+1000 2.一个id选择器+100 3.一个属性选择器、class或者伪类+10 4.一个元素选择
出几道css权重计算题
最新发布
07-03
在 CSS 中，样式的权重决定了哪些规则将应用于元素。当多个规则应用于同一个属性时，权重较高的规则会覆盖较低权重的规则。这里有一些关于 CSS 权重计算的题目： **题目 1：** - 假设一个元素有两个内联样式（行内样式）：`color: red;` 和 `font-size: 16px;` - 同时还有一个外部样式表定义：`.element { color: blue; font-size: 18px; }` 其中 `.element` 类应用到该元素上。 问：哪种颜色会被应用？字体大小呢？ **题目 2：** - 如果一个元素有一个 ID 样式 (`#myElement { background-color: yellow; }`)，一个类样式(`.redBackground { background-color: red; }`)，和一个元素直接选择器(`background-color: green;`)都设置了背景色， - 哪种颜色会显示？如果它们都有默认值（如浏览器默认背景），哪个会被覆盖？ **题目 3：** - 属性继承通常如何影响权重？例如，如果一个父元素有 `text-decoration: none;`，而子元素又设置了 `text-decoration: underline;`，最终结果是什么？ **相关问题--:** 1. CSS 内部样式、外部样式表、ID样式和类样式各自权重是多少？ 2. 如何确定一个CSS属性的最终值，当存在多个具有不同优先级的声明时？ 3. CSS 基于什么原则处理元素的样式继承以及何时会覆盖继承的样式？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值