2

この CSS カスケード/継承ルールの説明を見つけようとしています。以下の例では、em タグの色は #000000 になると思っていましたが、em タグの色は #ff0000 になると言われました。

私は、宣言されたセレクターの CSS 固有性規則には慣れていますが、スタイルを持つ他の要素内にネストされた要素については考えたことがありませんでした。W3C仕様のどこでこの動作を説明していますか? （または他のソース）

HTML:

<!DOCTYPE html>
<html>
  <body>
     <div>Hello, this is an <em>important</em> announcement.</div>
  </body>
</html>

CSS:

* { color: #ff0000; }
div {color: #000000; }
4

3 に答える 3

3

ドキュメント内のすべての要素を選択するを使用し*ているため、これを詳しく説明すると、実際には

div {
   color: red;
}

em {
   color: red;
}

/* And so on... */

デモ

すべての要素に赤色を指定したため、赤色が適用されます

ただし、最も具体的でないセレクターdivよりも具体的な要素セレクターを使用しているため、あなたは黒です*

だからあなたがあなたemを黒くしたいなら、あなたはデモを使う必要があります

em {
   color: inherit;
}

もしくはもっと具体的に

div em {
   color: inherit;
}
于 2013-06-12T12:14:07.227 に答える
2

color異なる を指定する一致ルールがない場合にのみ、親から を継承しますcolor。

*一致emするので、色は になります#ff0000。*は非常に特別なセレクターで、すべての要素に一致します。あなたの例では、次のように書いても基本的に同等です。

em { color: #ff0000; }
div {color: #000000; }
于 2013-06-12T12:13:12.630 に答える
2

これはネスティングとは関係ありません。ルールは 2 つだけです。div要素には色があると言う人もいれ#000ば、すべての要素に#f00色があると言う人もいます。最初のルールはあなたには適用されませんem(それは ではないためdiv)、2 番目のルールは適用されます。inheritデフォルト値をで上書きします。それだけ#f00です。

特異性とネストについて言えば、パス全体の特異性の値は単純に合計されます。

于 2013-06-12T12:13:25.047 に答える