制御継承(継承、初期、unset)
4306 ワード
木曜日
今日習った内容
-選択者の継承を制御する方法
制御継承には-initial、inherit、unsetの3つの要素があります.
前の2つの要素は、別のcssを無視し、親の値に従います. <div class="parent">
parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="parent2">
parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
.parent, .parent2{
color: blue;
font-size: 20px;
}
div {
border: 1px solid silver;
margin: 2px;
}
.parent *{
all: initial;
}
.parent2 *{
all:inherit;
}
.parent2 .child2 {
color:red
}
何も応用されていなければ。
親へのinitialの適用
親2に継承が適用されます.
違いが見えますか?
親からもらった属性が解かれている様子です.
しかし、Parent 2の両親が受け取った速成フォントサイズは20と青がそのままです.
Initialは完全に強力な属性で、親から得たものはすべて消滅します.
受け継がれた親から受けた受け継ぎはそのままで、残りは愛想がいい
設定されていません
2つのアトリビュートは、時間によって使用されます.
属性が受信できない場合は、 initial
を使用します.inherit
,
親がもらうものがあったので inherit
で起動しました.
Reference
この問題について(制御継承(継承、初期、unset)), 我々は、より多くの情報をここで見つけました
https://velog.io/@yangth/ZeroBase-FrontEnd-TIL01
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<div class="parent">
parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="parent2">
parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
.parent, .parent2{
color: blue;
font-size: 20px;
}
div {
border: 1px solid silver;
margin: 2px;
}
.parent *{
all: initial;
}
.parent2 *{
all:inherit;
}
.parent2 .child2 {
color:red
}
Reference
この問題について(制御継承(継承、初期、unset)), 我々は、より多くの情報をここで見つけました https://velog.io/@yangth/ZeroBase-FrontEnd-TIL01テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol