上記の CSS だけでなく、padding/margin も引き継がれていますが、デフォルトが 0 なので少し変更して、例えば
その結果、これらの子要素が開花しました:
一部の CSS 記事や CSS ドキュメントでは、互換性が最後に置かれています。
恥ずかしいことではありません。さあ、銃剣から始めましょう。
互換性は問題ありませんが、IE はサポートされていませんが、他のブラウザは基本的に緑色で、イントラネット プロジェクトなどに使用できます。
all 属性は実際にはすべての CSS 属性の略語であり、すべての CSS 属性がこれに似ていることを意味しますが、unicode-bidi は含まれません。と方向。これら 2 つの CSS プロパティ。
なぜこの CSS プロパティがあるのでしょうか?
一部の CSS プロパティ値は、inherit!
CSS で入力ボックスをリセットするときに、基本的にすべての CSS プロパティで共有されることはわかっていると思います (実際には特定の値である可能性があり、機能は同様です):
input, textarea { color: inherit; font-size: inherit; font-family: inherit;}
このタイプの入力コントロール自体にはサイズとフォントが組み込まれているため、リセットする必要があります。
この時点で、これらの属性値はすべて継承されていることがわかります。これらをマージできれば素晴らしいでしょう。
ヨーヨーヨー、本題に入りますが、マージには CSS の all 属性が使用されます。
input, textarea { all: inherit; }
ああ、スリーインワン、春風が顔に吹いているような気がします。ただし、これは表示用であり、all:inherit では背景色などを親から継承させるため、実際には使用しません。
構文は次のとおりです:
all: initial;all: inherit;all: unset;/* CSS4特性,无视之 */all: revert;
3 つの共通の CSS 属性値、initial、inherit、unset をサポートします。それぞれを表します とはどういう意味ですか?
ここをクリックできます: CSS3 全属性デモ デモ
デフォルトの HTML と CSS は次のようになります。タイトルとリストを含む従来のタグ コンテンツです:
<article> <h6>标题</h6> <p>p变文字</p> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <textarea>文本域</textarea></article>
article { background-color: #f0f3f9; color: green;}article > textarea { border: 1px solid #34538b; background-color: #ffffe0; color: red;}
この繁栄した時代では、ご覧のとおり:
色、間隔、テキストフィールドのステータスはすべて、私たちが考えるとおりに表示されます。
ここで、デモのドロップダウンをクリックし、対応するすべての属性値を選択し、次の CSS 効果を実現します:
.initial > * { all: initial;}.inherit > * { all: inherit;}.unset > * { all: unset;}
結果:
Initial は初期値を意味します。つまり、article 要素の下にあるすべての第 1 レベルのサブ要素は、unicode-bidi と direct を除く CSS の初期値を使用します。
たとえば、
要素は inline 要素に置き換えられているため、次のように 1 行で表示されます。
フォントサイズもブラウザソフト自体で設定したサイズ16pxを使用し、カラーもブラウザソフト自体の黒色に変更されます。たとえば、ブラウザ設定のフォント サイズを中から大に変更します:
。表示されるテキスト コンテンツも大きくなることがわかります:
隣接レベルのサブ要素については初期設定のみが行われるため、
したがって、
上記の CSS だけでなく、padding/margin も引き継がれていますが、デフォルトが 0 なので少し変更して、例えば
その結果、これらの子要素が開花しました:
したがって、
要素の表示属性値は初期値を使用するため、同じ行に 2 つ表示されます。要素は値を継承するため、すべて緑色になります。
記事を書き始める前は、この CSS プロパティは予想外の魔法のような効果をもたらすだろうと思っていました。魔法の効果、私はそれを調べることしかできませんでした。
all 関連する CSS が多すぎて、この CSS プロパティが使用されるシナリオがまだ思いつきません。または、特別な要素を突然通常の要素にしたい場合、たとえば、input 入力ボックスの外側の div に input{all:inherit;} が付いている場合、そのようなシナリオがあるようですが、入力ボックスはそうします境界線も背景も必要ありません パディングもマージンも必要ありません、まあ、悪くない、この記事を書く価値はありません。
この記事はオリジナル記事であり、頻繁に更新され、一部の間違いは修正されますので、転載する場合は(画像を直接リンクしないでください)お願いします。トレーサビリティを容易にし、誤った知識による誤解を避けるために元のソースを保持し、より良い読書体験を提供します。
この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5321
(この記事はここまで)