<script type="importmap">
Daily Archives: 2024-09-13
css中的unset, initial, inherit
CSS 中的 unset, initial, 和 inherit 关键字用于 CSS 属性值,提供了对属性继承和默认值的控制。这些关键字在处理样式复写和元素默认行为时非常有用,可以帮助开发者更精确地控制样式的应用。
1. unset
-
定义:
unset
是一个智能关键字,它根据 CSS 属性是否是继承属性来决定其行为。对于自然继承的属性,它表现得像inherit
(继承父元素的值);对于那些不继承的属性,它表现得像initial
(使用属性的初始默认值)。 -
用途:
unset
特别适用于想撤销特定元素上所有先前应用的样式,并希望某些样式回退到继承状态而其他回退到初始状态时。
button {
color: blue;
background-color: yellow;
border: 1px solid black;
}
button.reset {
all: unset;
}
在这个例子中,.reset
类的按钮将不再继承任何样式(如边框、背景、颜色等),color
和 background-color
将回到默认状态,而 border 将回到初始值,因为它通常不继承。
2. initial
- 定义:
initial
将一个属性设置为其初始默认值,即 CSS 规范中定义的值。 - 用途:适用于将元素的某个属性明确重置为其默认状态,无论上下文如何。这对于撤销样式中的某些特定更改非常有用。
div {
color: red;
}
div.default {
color: initial; /* 将颜色重置为黑色,默认的初始颜色 */
}
这里 .default 类的 div 元素将有默认的黑色文本,不论其父元素的颜色是什么。
3. inherit
- 定义:
inherit
明确地设置属性值为直接父元素的相同属性值。 - 用途:在一些特殊情况下,你可能需要强制一个元素继承其父元素的某些属性,即使默认情况下它不会这样做。
div {
color: green;
}
span {
color: inherit; /* 将颜色设置为继承其父 div 的颜色 */
}
这里的 span 通常不会继承 div 的颜色,除非明确指定使用 inherit。
在实际开发中的应用
- 布局复位:使用
all: unset
; 或特定属性的initial
值来重置某些复杂的组件或插件的默认样式,避免样式冲突。 - 主题一致性:在构建具有深度继承和多级覆盖的大型网站或应用时,
inherit
可以确保子组件继承关键视觉属性(如字体、颜色)。 - 框架和库的整合:在将第三方 CSS 框架或库整合到项目中时,经常会使用这些关键字来帮助撤销或应用某些默认或继承样式,确保组件的视觉一致性。
Git 中reset的三种模式
-
使用场景:当commit的内容有错误,需要回撤到之前的某个版本时。
-
git-reset - Reset current HEAD to the specified state
意思是可以让HEAD这个指针指向其他的地方。例如我们有一次commit不是不是很满意,需要回到上一次的Commit里面。那么这个时候就需要通过reset,把HEAD指针指向上一次的commit的点。
注,Git一般划分为3个区域,working directory 为当前工作区、stage/index为暂存区(git add后的代码就会存储在这部分)、repository则记录提交的历史(git comment后的代码会存在这里)。3个区域关系如下图所示
Soft Reset
当执行一个 soft reset
时,Git 会将 HEAD(当前分支的指针)移动到你指定的提交,但不会改变暂存区(index)或工作目录。这意味着所有从你回退之后的提交到目前的改动都会被保留在暂存区中,等待再次提交。
- 撤销之前的提交但保留代码更改,以便重新审查或修改后再次提交。
git reset --soft [commit]
Hard Reset
执行 hard reset
时,Git 不仅将 HEAD 移回到指定的提交,而且还会重置暂存区和工作目录,使它们与回退到的那个提交完全一致。这意味着自那个提交之后的所有更改都会被彻底删除。
- 完全撤销某个提交及其后的所有更改,恢复到一个确定的、干净的状态,通常用于错误的提交。
git reset --hard [commit]