6

次のCSSがあるとしましょう：

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

私のマークアップは次のとおりです。

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
</div>

私の質問は、上記の CSS は次のように変換されますか?

body {
  color: blue;
}
div {
  color: green;
}
#alert{
  color: red;
}

または追加がありますか

* {
  color: red;
}

変数がない場合、ユニバーサル セレクターはすべての要素に同じ CSS を適用します。これは変更され、スタイリングは要素に依存するようになりますか?

私が持っているもう 1 つの質問は、CSS に:root変換するかどうかです。body

ここに CodePen のデモがあります: http://codepen.io/anon/pen/RrvLJQ

4

1 に答える 1

7

タイトルで正しく述べたように、カスタム プロパティはカスケードします。実際、これがモジュールがカスケード変数の CSS カスタム プロパティと呼ばれる理由です。つまり、カスタム プロパティ--colorは、他の CSS プロパティと同様に、要素ごとにそのまま評価されます。要素に適用される実際のスタイルに関しては、実際にあるのは次のとおりです。

* {
  color: var(--color);
}

次に、プロパティのカスケードvar(--color)方法に基づいて、要素ごとに値が評価されます。--colorしたがって、次のようになります。

  • 要素のbody前景は青色です。
  • すべてdivの要素の前景は緑色です。
  • ID が "alert" である要素の前景は赤です。
  • --colorの定義がないため*、デフォルトで継承されます。したがって、他のすべての要素--colorは親要素からbody > p継承されます。 から継承されbodyて青になり、 から#alert > p継承され#alertて赤になります。

カスケードされた値を CSS で表現したい場合は、次のように変換できます。

:root {
  color: blue;
}
div {
  color: green;
}
#alert {
  color: red;
}
* {
  color: inherit;
}

ただし、元の CSS に、すべての要素がにマップさ* { color: var(--color); }れることを保証する明示的な定義が含まれているためです。color--color

あなたが持っているコードは、仕様内の例から来ていることにも注意してください。それ自体は次のように説明されています。

カスタム プロパティが複数回宣言されている場合は、標準のカスケード ルールが解決に役立ちます。変数は常に、同じ要素の関連付けられたカスタム プロパティの計算値から取得されます。

私が持っているもう 1 つの質問は、CSS に:root変換するかどうかです。body

  1. :rootCSS はドキュメントの言語に依存しないため、CSS のどの要素にも変換されません。
  2. :rootbodyHTMLには変換されません。に対応していhtmlます。
于 2016-02-13T03:21:23.663 に答える