質問: ### 発生している問題・エラーメッセージ cssで直下セレクタを用いる場合に、子セレクタだけではなく、さらに下の階層まで効いてしまいます。 ### 該当のソースコード ``` 11 12 1 2 3 13 14 15 ``` ``` .big .mid{ color: yellow; } .big > li{ color: green; } .big { color: red; } ``` ### 試したこと 具体的には、、、 上記の状態では11~15が緑に表示され1~3に黄色が表視されるのですが、color: yellowを効かなくする(下記に記載)と、すべての文字が緑になってしまいます。どうしてでしょうか? 予想では1~3は赤色になると予想していたのですが・・・ ``` .big .mid{ /*color: yellow;*/ } ```
回答: `color` は継承するので `.big > li` 以下の要素すべて(特に指定が無い場合)に適用されます。 【ほんっとにはじめてのHTML5とCSS3:【5】CSSの値の継承(Inheritance)のルール】