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> 

當我移動height屬性到它自己的類，並給予元素兩種風格，高度被忽略。

#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

將＃號改爲。因爲您使用的是類，因此請使用box和red_box css選擇器，＃用於id，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>