複数のCSS要素を1つのIDで囲む

Question

特定のDivにのみ適用されるCSSを作成しようとしています。私は、この例のために動作するコードを持っているが、私はすべての行

HTML

<div class="landing"> 
    <h1>Hey</h1> 
    <p>Hi</p> 
</div> 
<div class="notlanding"> 
    <h1>Hey</h1> 
    <p>Hi</p> 
</div> 

CSS

.landing h1{ 
    color: red; 
    } 
.landing p { 
    color: blue; 
    } 

の前に .landingを置くために私を必要としない方法でそれをやりたいです

これは私が達成したいことをもたらしますが、h1とpを両方ともラップする方法は.landingにありますか？あなたはCSSで使用することはできません。この

.landing { 
    h1{ 
     color: red; 
    } 
    p { 
     color: blue; 
    } 
} 

Answer 1

はありません。この方法のように

何か。

しかし、もしあなたがSASSを使用することができます - 文法的に素晴らしいスタイルシート

http://sass-lang.com/

SASSは、変数の宣言とはるかのようなcssダイナミックを書くことができます。上記のリンクをチェックしてください。

Answer 2

私たちがlessやsassのようなCSSコンパイラを使用しているなら、あなたはそれを行うことができます。私はあなたが純粋なCSSでそれをすることはできないと思います。

Answer 3

これを達成するもう1つの方法は、シャドウDOM（広くサポートされていない）を使用することです。そして、あなたの着陸飛行場はシャドールートになり、独自のスタイルシートを持つことができます...これは基本的に角2で動作します。