###発生している問題・エラーメッセージ
cssで直下セレクタを用いる場合に、子セレクタだけではなく、さらに下の階層まで効いてしまいます。
###該当のソースコード
html
1<body> 2 <ul class="big"> 3 <li>11</li> 4 <li>12 5 <ul class="mid"> 6 <li>1</li> 7 <li>2</li> 8 <li>3</li> 9 </ul> 10 </li> 11 <li>13</li> 12 <li>14</li> 13 <li>15</li> 14 </ul> 15</body> 16
css
1.big .mid{ 2 color: yellow; 3} 4.big > li{ 5 color: green; 6} 7.big { 8 color: red; 9}
###試したこと
具体的には、、、
上記の状態では1115が緑に表示され13に黄色が表視されるのですが、color: yellowを効かなくする(下記に記載)と、すべての文字が緑になってしまいます。どうしてでしょうか?
予想では1~3は赤色になると予想していたのですが・・・
css
1.big .mid{ 2 /*color: yellow;*/ 3} 4
回答2件
あなたの回答
tips
プレビュー