CSS之权重和继承

已于 2022-10-14 20:24:28 修改
阅读量248 收藏
点赞数
分类专栏： CSS 文章标签： css 前端 vscode
于 2022-10-14 20:23:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53977993/article/details/127325877
版权
本文介绍了CSS中的样式冲突解决机制，重点讲述了选择器的权重计算原则，包括！important的最高优先级、选择器权重的累加计算以及相同优先级时的选择。此外，还探讨了CSS的样式继承特性，说明了哪些样式可以被后代元素继承，帮助优化前端开发效率。
摘要由CSDN通过智能技术生成

目录

样式冲突？

选择器的权重

 样式继承

样式冲突？

通过不同的选择器选中同一个元素，进行一样的样式设定，发生样式冲突时，应用哪一个样式呢？

答：当发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定。

选择器的权重

                                                        权重占比
           !important    最高优先级                       无穷大
           内联样式                                       1000  
           id选择器                                       100
           类和伪类选择器/属性选择器                       10
           元素选择器                                     1
           通配符、子选择器、相邻选择器等。如*、>、+...     0000
           继承的样式     没有优先级                       无穷小

 图上的数字不是说明起权重的大小，而是直观的比较权重的优先级。

 注意：

1、!important是最高优先级，需要慎用(一般是用来检测是否是选择器权重问题)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
最低0.47元/天 解锁文章
幻阳梦天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css继承与选择器的权重
weixin_52984349的博客
07-07 489
css继承与选择器的权重,跟着小白一起学，每天一小步。
CSS样式继承和层叠
09-24
CSS样式继承和层叠是CSS（层叠样式表）中两个关键的概念，它们共同决定了页面元素的最终显示效果。理解这两个概念对于优化网页设计和维护至关重要。 **样式继承** 样式继承是指当一个父元素设置了某些样式后，这些...
CSS的三大特性与权重的叠加
weixin_62268437的博客
07-16 352
本文主要介绍了CSS中的三大特性及有关权重的叠加问题，每个知识点后面附有案例源码和效果展示，供广大网友参考，与之共勉！！！
通配符的继承关系
qq_33667439的博客
12-08 495
通配符   在类表达式中class Facher{ private int first; public Facher(){} public void spack(String s){ System.out.println("Facher Spack "+ s); } } class Child extends Facher{ public
Css三大特性：层叠性，继承性，优先级
m0_51495354的博客
11-11 538
Css三大特性：层叠性，继承性，优先级
【CSS】CSS 特性 ④ ( CSS 优先级 | 继承权重 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-15 659
一、继承权重 1、继承权重示例 2、继承权重+标签选择器权重示例 3、继承权重+标签选择器权重+类选择器示例
CSS特殊性、继承与层叠
12-10
在CSS中，特殊性、继承和层叠是决定样式如何应用于网页元素的三个核心概念。 首先，我们来详细探讨特殊性规则。特殊性是CSS中用于确定哪些样式应该优先应用的一种机制。它由选择器的不同组件决定，并由四个数字部分...
权重和层叠规则决定了CSS样式优先级
09-25
在CSS样式设计中，权重和层叠规则是决定哪些样式将...总结来说，理解CSS的权重和层叠规则是优化和调试样式的关键。正确应用这些规则，可以帮助开发者确保所需的样式准确无误地显示在网页上，从而实现理想的布局效果。
CSS层叠与继承的使用深入剖析
09-25
总之，理解CSS层叠和继承的概念及其工作原理，可以帮助开发者更好地控制网页的样式，避免样式冲突，提升页面设计的可维护性和一致性。通过巧妙地运用层叠和继承，可以创建出灵活且响应式的网页设计。
CSS的属性继承
coolchaobing的博客
07-28 3389
认识CSS的属性继承
CSS基础知识（七）：CSS三大特性——层叠性、继承性、优先级
前端
11-01 912
文章目录一、CSS三大特性二、层叠性三、继承性四、优先级 一、CSS三大特性 CSS三大特性：层叠性、继承性、优先级 二、层叠性 层叠性主要解决：冲突的问题，相同的选择器设置相同的样式，此时会产生样式冲突，层叠性使用就近原则，让一个样式覆盖掉另一个样式 样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 三、继承性 css的继承: 子标签会继承父标签的某些样式，如文本的颜色和字号，简单的理解就 是子承父业 恰当的使用继承可以简化代码，降低css样式的复杂性
权重的继承问题
我要好好当个计院狗
04-28 446
总结优先级： 1.使用了！important声明的规则 2.内嵌在HTML元素的style属性里面的声明 3.使用了id选择器的规则 4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则 5.使用了元素选择器的规则 6.只包含一个通用选择器的规则 7.同一类选择器遵循就近原则 表格展示： 继承或者*的贡献值 0.0.0.0 每个元素（标签）的贡献值 0.0.0...
css——选择器 选择器优先级 优先级提升 选择器权重计算 继承性
肖的博客
08-13 4115
1、选择器 :focus——选择具有焦点的输入元素 :first-letter——选择元素的第一个字母 :first-line——选择元素的第一行 :before——在元素之前插入内容 :after——在元素之后插入内容 id选择器：#id{ } 命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于id命名 id选择器不可重复 独一无二 类选择器：.className...
[CSS]CSS的继承性、层叠性、权重
Feathers的个人笔记
12-13 4579
CSS像艺术家一样优雅，像工程师一样严谨继承性CSS样式具有继承性，所谓的继承性，就是给某些元素设置样式时，后代元素也会自动继承父类的样式。这叫CSS的继承性。比如 color属性设置字体颜色，后代自动继承。CSS的继承特性，一定程度上简化了代码的操作，至少方便了我这类懒癌患者。<!DOCTYPE html> <html> <head> <title>test</title> <me
css中继承的权重
hhthht8888的博客
01-19 818
继承来的css属性的权重要低于*通配符选择器 总体权重排序如下：
css样式继承规则详解
weixin_34278190的博客
06-25 1073
css样式继承规则详解 一、总结 一句话总结：继承而发生样式冲突时，最近祖先获胜（最近原则）。   1、继承中哪些样式不会被继承？ 多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。   2、表格能继承父亲的样式么？ 不能   3、如何给当前设置的样式添加最高权限？ ！important  设置某个规则比其他的规则更重要  ...
css选择器的继承与权重
cj1555640的博客
07-29 323
java学习第五天:css选择器的继承与权重
CSS权重
gxgalaxy
08-07 1198
选择器 权重值 ！important infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 CSS中各个选择器之间权重的进制为256进制 优先级一样的时候谁在后面，谁起作用（覆盖） 在CSS中infinity+1就是要比infinity大一 例子： ...
出几道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、付费专栏及课程。

余额充值