CSS知识补充 --- 控制继承

每天学习一点点!!!
总所周知,CSS某些属性可以继承,然后今天看到MDN的时候看到了CSS也可以控制继承,感觉很有意思,所以记录一下:
控制继承有5个属性值,分别:initial、inherit、revert、revert-layer、unset

作用如下:

  1. initial:设置元素某可继承属性为初始值
  2. inherit:设置元素某可继承属性与父元素相同;
  3. revert(英语):重置元素某可继承属性为浏览器默认样式;
  4. revert-layer(英语):重置元素某继承属性为在上一个层叠层(@layer)中建立的值注意:如果当前规则不在 @layer 中,或者不存在上一层 @layer 中,revert-layer则等同于revert
  5. unset:重置元素某继承属性为自然值

例子

HTML

<div class="test-MDN-index"><h2>test-控制继承</h2><ul><li class="li-initial">测试控制继承 <a href="#">a标签color: initial</a> 属性值</li><li class="li-inherit">测试控制继承 <a href="#">a标签color: inherit</a> 属性值</li><li class="li-revert">测试控制继承 <a href="#">a标签color: revert</a> 属性值</li><li class="li-revert-layer">测试控制继承 <a href="#">a标签color: revert-layer</a> 属性值</li><li class="li-unset">测试控制继承 <a href="#">a标签color: unset</a> 属性值</li></ul>
</div>

CSS

.test-MDN-index {color: green;
}
ul {color: red;
}
.li-initial a {color: initial;
}
.li-inherit a {color: inherit;
}
.li-revert a {color: revert;
}
.li-revert-layer a {color: revert-layer;
}
.li-unset a {color: unset;
}
@layer test {.li-revert-layer a {color: purple;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/910201.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/910201.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用Ant Design Blazor组件在列表页弹窗增加修改数据

在winform中首次使用net8做页面。列表页想使用Ant Design组件的弹窗组件实现。但第一次在winform项目中使用ant design组件&#xff0c;列表页面&#xff0c;点击新增&#xff0c;或者编辑操作实现弹窗页面&#xff0c;弹窗页面想使用模板页razor页来实现&#xff0c;而不是用m…

嵌入式学习 51单片机01

一、框架 1、CPU&#xff08;Central Processing Unit&#xff0c;中央处理单元&#xff09;‌是计算机的核心部件&#xff0c;负责执行计算机指令和处理数据。 2、MCU&#xff08;Microcontroller Unit&#xff0c;微控制单元&#xff09;‌是一种将中央处理器、内存、输入输出…

C语言之内存对齐

一、为什么要内存对齐 Arm对内存的访问支持字&#xff08;4byte&#xff09;、半字&#xff08;2byte&#xff09;、字节&#xff08;1byte&#xff09;的直接访问&#xff0c;但是呢他们是有一定的要求的&#xff1a; 存取字时要求地址按字对齐&#xff0c;也就是地址要是4的…

Python 基础语法 -----函数

一、函数 1、函数是什么 编程中的函数和数学中的函数有一定的相似之处。 数学上的函数&#xff0c;比如 y sin x&#xff0c;x 取不同的值&#xff0c;y 就会得到不同的结果。 编程中的函数是一段可以被重复使用的代码片段。 &#xff08;1&#xff09;求数列的和&#x…

Windows/Linux系统 Ollama部署deepseek 大模型

Ollama 是一个开源工具&#xff0c;专门用于在本地计算机上运行和操作大型语言模型&#xff08;LLM&#xff09; 官方下载网站&#xff08;https://ollama.ai/&#xff09; Windows系统安装方法 建议命令行安装&#xff08;默认安装会直接安装到C盘&#xff09; OllamaSetu…

用Tensorflow进行线性回归和逻辑回归(一)

这一章告诉你如何用TensorFlow构建简单的机器学习系统。第一部分回顾构建机器学习系统的基础特别是讲函数&#xff0c;连续性&#xff0c;可微性。接着我们介绍损失函数&#xff0c;然后讨论机器学习归根于找到复杂的损失函数最小化的点的能力。我们然后讲梯度下降&#xff0c;…

java/.net跨平台UI浏览器SDK,浏览器控件开发包分析

在 Linux 系统中&#xff0c;虽然没有完全等同于安卓 WebView 的内置浏览器 SDK&#xff0c;但存在多种基于开源浏览器引擎的解决方案&#xff0c;支持通过 Java 代码控制网页加载和执行 JavaScript。以下是具体实现方案和技术细节&#xff1a; 一、核心技术方案对比 方案名称…

Taro 状态管理全面指南:从本地状态到全局方案

在跨端应用开发中&#xff0c;状态管理是构建可维护、可扩展应用的核心环节。作为京东凹凸实验室推出的多端统一开发框架&#xff0c;Taro 支持 React/Vue 等主流前端框架&#xff0c;自然也继承了丰富的状态管理生态。本文将全面剖析 Taro 中的各种状态管理方案&#xff0c;从…

记录一下jar做成windows服务问题

1、打包好jar 2、把jdk防止到和jar同一目录下 3、下载winsw-x64.exe 和 sample-minimal.xml https://github.com/winsw/winsw/releases/download/v2.12.0/WinSW-x64.exehttps://github.com/winsw/winsw/releases/download/v2.12.0/WinSW-x64.exe sample-minimal.xmlhttps://…

【Dify 案例】【MCP实战】【二】【超级助理】

我们创建一个工作流。你是一个超级助理,能够根据输入的指令,进行推理和自主调用工具,完成并输出结果。 注意,需要判断是否调用高德MCP来获取对应工具协助你完成任务。 1.开始 2.策略大脑 2.1 AEGNT策略 2.2 工具列表 2.3 指令

Qt Quick 与 QML(二)qml中的顶级窗口

一、前言 在QML中&#xff0c;‌顶级窗口不是绝对必需的‌&#xff0c;但它在大多数应用场景中扮演着关键角色。 需要顶级窗口的典型场景&#xff1a; 1.独立桌面/移动应用‌ 必须使用Window或ApplicationWindow作为根元素。 2.多窗口应用 每个独立窗口都需要一个顶级窗口实例…

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 免费服务开通全流程与Rest API和OpenAI SDK调用详解

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 免费服务开通全流程与Rest API和OpenAI SDK调用详解 前言 本文将详细介绍DeepSeek-V3/R1 免费服务开通全流程&#xff0c;并且详细讲解通过本地方式Rest API和OpenAI SDK两种方式调用DeepSeek-V3/R1 前提准备 1、访问 Mod…

Qt 连接信号使用lambda表达式和槽函数的区别

1. 语法与代码结构 成员函数 需在类中显式声明槽函数&#xff08;public slots: 或 Qt 5 后的任意成员函数&#xff09;&#xff0c;并在连接时指定接收对象。 class Receiver : public QObject {Q_OBJECT public slots:void handleSignal(int value) { /* ... */ } };// 连接…

学习笔记丨AR≠VR:透视沉浸式技术的“虚实象限”法则

AR&#xff08;增强现实&#xff09;和VR&#xff08;虚拟现实&#xff09;是沉浸式技术的两大分支&#xff0c;核心区别在于虚拟与现实的融合程度。以下是两者的详细对比&#xff1a; 对比维度 AR&#xff08;增强现实&#xff09; VR&#xff08;虚拟现实&#xff09; 技术…

本地使用 modelscope 大模型 来进行文本生成视频(Text-to-Video)

1. ✅ 创建并激活 Conda 环境&#xff08;Python 3.8&#xff09; conda create -n modelscope python3.8 -yconda activate modelscope 2.✅ 安装了 PyTorch&#xff08;CPU 版本&#xff09; 如果你是 CPU-only 用户&#xff08;没有 NVIDIA 显卡 或不想用 GPU&#xff0…

文生视频(Text-to-Video)

&#x1f552; 生成时间&#xff1a;每张图大概 10–60 秒&#xff08;取决于设备&#xff09; ✅ 二、文生视频&#xff08;Text-to-Video&#xff09; 以下项目中&#xff0c;很多都基于 SD 模型扩展&#xff0c;但视频生成复杂度高&#xff0c;生成时间一般 超过 30 秒&am…

CLion + STM32环境配置,亲测有效(2025.06.19记)

CLion STM32环境配置 遇到的问题描述&#xff1a; > "moniton" command not supported by this target. > You cant do that when your target is exec > 上传完成&#xff0c;但存在问题 > monitor reset > "monitor" command not …

借助ChatGPT快速开发图片转PDF的Python工具

一、开发背景与适用场景 随着数字文档处理需求的激增&#xff0c;图片转PDF的需求日益广泛。从学生提交图像化作业&#xff0c;到教师整合扫描试卷等资料&#xff0c;再到行政人员归档证件照片&#xff0c;工作中的方方面面都离不开图片的处理。如何高效、批量地将多个图片文件…

SuGAR代码精简解读

目录 一、全流程训练脚本 train_full_pipeline.py 二、核心训练逻辑 train.py 粗优化 (coarse_density_and_dn_consistency.py) 网格提取 (extract_mesh_from_coarse_sugar) 精优化 (refined_training) 两次优化&#xff08;粗优化和精优化&#xff09;中使用的损失函数及…

大模型安全关键技术研究

​ 引言 随着人工智能技术的迅猛发展&#xff0c;大模型已成为推动各行业变革的核心力量。从智能客服、医疗影像识别到金融风险预测&#xff0c;大模型的应用场景不断拓展&#xff0c;深刻改变着人们的生产生活方式。大模型已经转变为AI领域的基础设施&#xff0c;为解决各种…