CSSクラスは、これは正しい結果を生成し、リスト

Question

に無視：私は、独自のクラスに高さプロパティを移動し、要素に両方のスタイルを与えるとき

#container { 
    display: flex; 
} 

#red_box { 
    height: 30%; 
    width: 30%; 
    background-color: red; 
} 

    <div id ="container"> 
     <div id="red_box">a</div> 
     <div id="blu_box">b</div> 
    </div> 

、高さは無視されます。

#container { 
    display: flex; 
} 
#box { 
    height: 30% 
} 
#red_box { 
    width: 30%; 
    background-color: red; 
} 

    <div id ="container"> 
     <div class="box red_box">a</div> 
     <div class="box blu_box">b</div> 
    </div> 

Answer 1

＃記号を変更してください。あなたがクラスを使用しているので、＃とidは一意であるべきですが、複数の要素が同じクラスを持つことができるので、＃を使用しています。あなたはあなたのコード内の問題のいくつかを持って

Answer 2

：

#container { 
 
    display: flex; 
 
} 
 

 
.box { /* Change id selector "#" to class selector "." */ 
 
    height: 30% 
 
} 
 

 
.red_box { /* Change id selector "#" to class selector "." */ 
 
    width: 30%; 
 
    background-color: red; 
 
}

<div id="container"> <!-- Remove space between id and equal sign --> 
 
     <div class="box red_box">a</div> 
 
     <div class="box blu_box">b</div> 
 
    </div>

Answer 3

を私はIDの上のCSSクラスを使用することをお勧めしますが、非常に少なくとも、あなたはconsitentする必要があります。問題は#boxと#red_boxを使っていますが、これはidのものですが、クラスとして参照しています。

あなたはどのクラスセレクタを持っていない

.container { 
    display: flex; 
} 
.box { 
    height: 30% 
} 
.red_box { 
    width: 30%; 
    background-color: red; 
} 

    <div class="container"> 
     <div class="box red_box">a</div> 
     <div class="box blu_box">b</div> 
    </div>