CSS多級選擇

Question

所以我的問題是如何將樣式只適用於class="wp"由編號#test？
因爲在我的主項目中我有很多像wp這樣的類，但是上面的id與那些類不同，所以如何用id做到leaveit裏面的類不會被改變？

#test { 
 
    text-align: center; 
 
    color: red; 
 
    width: 550px; 
 
    background: black; 
 
    height: 250px; 
 
}

<div id="test"> 
 
    <div class="blablabla"> 
 
    <p class="wp">test</p> 
 
    <p class="leaveit">This paragraph will be red and</p> 
 
    </div> 
 
</div>

Answer 1

#test .wp { /*styles go here*/ } 

易peasy。

Answer 2

使用#test靶向與test ID的元件，所述.wp 靶向#test元件內用wp類的元素。

請記住，使用id來定位CSS中的元素被認爲是不好的做法，因爲很難覆蓋它。

#test .wp { 
    text-align: center; 
    color: red; 
    width: 550px; 
    background: black; 
    height: 250px; 
}