百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

CSS属性:inherit、initial、unset、revert样式控制更上一层楼

myzbx 2025-01-24 13:05 20 浏览

CSS(层叠样式表)是一种强大的用于样式和格式化网页文档的工具。在这份全面的指南中,我们将探讨四个特殊关键词: inheritinitialunsetrevert

Inherit(继承):从父元素传递值

inherit 关键字用于明确指示元素从其父元素继承CSS属性的值。当属性设置为 inherit 时,元素将采用与其父元素相同的值。当你希望文档中的样式保持一致或者希望特定元素从其父元素继承某些样式时,这种行为特别有用。

例如,考虑一个场景,你有一个具有指定文本颜色的

元素。默认情况下,文本颜色属性( color )是继承的,意味着子元素将具有与父元素相同的文本颜色。然而,你可以使用 inherit 关键字来明确强制执行这种行为,即使在父元素的 CSS 中没有明确指定。

div {
  color: black; /* Text color of the parent div */
}
a {
  color: inherit; /* 从父div继承文本颜色 */
}

在某些情况下,使用 inherit 来设置字体大小或颜色可能是个好主意,但需要注意的是,并非所有属性都会默认继承。了解继承属性和非继承属性之间的区别对于有效地使用 inherit 关键字至关重要。

Initial(初始):重置为默认值

initial 关键字用于将CSS属性重置为CSS规范中指定的初始值。每个CSS属性都有一个由W3C规范定义的初始值,作为默认值。通过使用 initial ,你可以覆盖任何先前的样式并将属性设置回其初始状态。

规范中定义的初始值可能会有所不同。有些初始值具有直观意义,而其他一些可能看起来是随意的。例如, float: nonebackground-color: transparent 是符合常见预期的初始值的示例。然而,像 display: inline 这样的属性可能看起来违反直觉,但这些初始值是基于历史原因或确立起始点的需要而确定的。

button {
  color: initial; /* 将颜色属性重置为初始值 */
}

请记住, initial 关键字只会重置应用于特定属性的值,不会影响其他属性或继承的值。此外,请注意规范中定义的初始值可能并不总是与期望的行为一致。

Unset(取消设置):全面重置

unset 关键字是一个强大的工具,可以全面重置 CSS 属性。它结合了 inheritinitial 关键字的功能,提供了更灵活的重置选项。

对于非继承属性, unset 的工作方式类似于 initial 关键字。它将属性重置为CSS规范中定义的初始值。这确保了属性在没有任何先前样式影响的情况下重新开始。

div {
  margin: unset; /* Resets the margin property to its initial value */
}

然而,对于继承属性, unset 的行为有所不同。它不会将属性重置为初始值,而是恢复属性的自然行为,包括从父元素继承值。

p {
  color: unset; /* Allows the color property to inherit from its parent */
}

当你想要全面重置属性时,无论是继承属性还是非继承属性, unset 关键字尤为有用

Revert(恢复):回归至浏览器样式

revert 关键字是CSS关键字家族的最新成员。与 unset 类似,它允许您重置CSS属性。然而, revert 会考虑到样式表的级联特性,并尊重浏览器的默认样式。

应用于属性时, revert 会取消任何先前的样式,并将属性恢复为浏览器默认样式表定义的值。它实质上将属性返回到由浏览器确定的原始状态。

h1 {
  font-size: revert; /* Reverts the font-size property to the browser's default */
}

在上面的示例中, font-size 元素的

属性被设置为 revert ,这使得它可以采用浏览器默认样式表中定义的字体大小。这样可以确保与网页的整体样式一致,并尊重用户的偏好。

总结

在这个全面的指南中,我们已经探索了特殊的CSS关键字 inheritinitialunsetrevert 。这些关键字提供了对CSS属性的有价值的控制,允许你 从父元素传播值,将属性重置为初始或默认状态,并操纵级联样式。

相关推荐

C语言备忘录 - 09. 数组与字符串(c语言数组字符串长度)

C语言支持数组数据结构,它可以存储一个固定大小的相同类型元素的顺序集合。数组都是由连续的内存位置组成。最低的地址对应第一个元素,最高的地址对应最后一个元素。一、数组定义/*定义一个一维数组数...

Java 读取 xml 文件的五种方式(java读取xml工具类)

1、Java读取xml文件的五种方式在Java中读取XML文件有多种方法,这里列出五种常见的方式:DOM解析器(DocumentObjectModel):DOM是处理XML文...

如何获取一个APP的所有接口API和参数签名信息?

先给出所需的工具:步骤工具/技术抓包Charles、Fiddler、Wireshark、tcpdump反编译Jadx、JEB、Apktool动态调试Frida、IDAPro、Unidbg/Unico...

编辑距离算法详解:Levenshtein Distance算法

算法基本原理:假设我们可以使用d[i,j]个步骤(可以使用一个二维数组保存这个值),表示将串s[1…i]转换为串t[1…j]所需要的最少步骤个数,那么,在最基本的情况下,即在i等...

RTCP协议详解(SR、RR、SDES、BYE、APP、NACK、TCC、PLI、SLI)

RTCP协议规范中定义了五种类型的RTCP包:接收方报告(RR)、发送方报告(SR)、源描述(SDES)、成员管理(BYE)和应用程序定义(APP)。SR:payload...

javascript实现获取中文汉字拼音首字母

今天分享一个日常开发中可能会用到的一个小功能,简单说就是输入中文汉字可转换得到中文汉字拼音首字母。当然我可写不出这样的功能,源码来自于其他民间大神的分享,博主在此记录一下功能demo,方便日后复用,同...

记一次前端逻辑绕过登录到内网挖掘

前言在测试一个学校网站的时候发现一个未授权访问内网系统,但是这个未授权并不是接口啥的,而是对前端js的审计和调试发现的漏洞,这里给大家分享一下这次的漏洞的过程文章中涉及的敏感信息均已做打码处理,文...

Node.js 是怎么找到模块的?(node.js有哪些模块)

大家好,我是前端西瓜哥,今天我们来看看Node.js模块查找的原理。模块种类模块有三种来源。核心模块:Node.js内置的包。比如http、fs、path;自定义模块:NPM包。比如axi...

细节确定成败!全网最详细的xxs夸脚本攻击以及测试方法(上)

XSS全称是CrossSiteScripting也是跨站脚本,他也分为三种类型存储型,反射型,DOM型。当目标网站目标用户浏览器渲染HTML文档的过程中,出现了不被预期的脚本指令并执行时,XSS就...

简单易懂的KMP字符串匹配算法(实现kmp字符串匹配)

什么是KMPKMP算法是Knuth、Morris和Pratt三人设计的线性时间字符串匹配算法。算法的核心思想是尽可能地利用已知信息,减少尝试匹配的次数,从而降低时间复杂度。要想彻底地弄懂KMP算法,需...

golang标准库每日一库之strings(golang 字符串操作)

以下为Go语言strings包的深度解析,涵盖字符串切割、替换、查找等核心操作及高效处理技巧:一、基础字符串操作1.字符串切割(Split)函数作用描述示例strings.Split(s,s...

开源轻量级BT下载器qBittorrent 5.1.1发布:改进Wayland会话

IT之家6月24日消息,科技媒体9to5Linux昨日(6月23日)发布博文,报道称开源轻量级BT下载器qBittorrent发布5.1.1版本更新,主要改进支持Lin...

晨雾轻散时!2 道 JS 面试题细解,静享知识慢时光

清晨的雾气渐渐散去,阳光透过纱窗洒在桌前,泡一杯温热的蜂蜜水,让我们在这宁静的氛围里,以轻松的节奏聊聊两道JavaScript高频面试题。就像在晨光中散步,不急不躁地探索知识,让学习成为一种治愈的...

JS 写正则表达式,判断是否为手机号

以下是使用JavaScript写正则表达式,判断一个字符串是否为手机号的示例代码:在上述代码中,我们定义了一个isPhoneNumber函数,该函数接收一个字符串作为参数,使用正则表达式判断该...

不用任何 js 库,纯前端导出数据到 Excel / CSV 文件就简单几行代码

最近实现的导出数据为表格的需求,不需要工具库,也不要后端实现,mark一下。js导出excel表格最近工作中又遇到了将表格数据导出为excel表格的需求,我第一时间想到的是之前我的网站上推...