CSSマルチレベルクラスを選択

Question

私の質問はclass="wp" idだけでスタイルを適用する方法です#test？
私の主なプロジェクトでは、wpのようなクラスがたくさんありますが、上記の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要素内wpクラスを持つ要素を標的とする、test IDと.wp の要素を対象とする使用#test。

idをCSSのターゲット要素に使用することは、それを上書きするのが難しいため、悪い習慣とみなされます。

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