やりたい事
殆ど同じプロパティを持つスタイルが複数ある。
基底スタイルと派生スタイルを作り、記述を簡単にしたい。
問題
コードを書いたが、上手く継承出来ない。
コード
html
1<!DOCTYPE html> 2<html> 3 4 <head> 5 <style> 6 *{ 7 padding: 0px; 8 margin: 0px; 9 } 10 11 p{ 12 font-size: 30px; 13 } 14 15 .BaseBox{ 16 width: 300px; 17 height: 300px; 18 margin: 50px; 19 background-color: green; 20 } 21 22 #BoxA > .BaseBox{ 23 background-color: red; 24 } 25 26 #BoxB > .BaseBox{ 27 background-color: blue; 28 } 29 </style> 30 </head> 31 32 <body> 33 <div class="BaseBox"><p>多分緑色</p></div> 34 <div id="BoxA"><p>多分赤色</p></div> 35 <div id="BoxB"><p>多分青色</p></div> 36 </body> 37 38</html>
結果
BoxA, BoxBは色が変わるどころか、Boxも表示されない(BaseBoxスタイルが適用されていない)
ご教授お願いします。
回答1件