Wrapping mehrerer CSS-Elemente unter einer ID

Question

Ich versuche, CSS zu schreiben, das nur für bestimmte Divs gilt. Ich habe Code, der für dieses Beispiel funktioniert, aber ich möchte es in einer Art und Weise tun, die mich nicht benötigen .landing vor jeder Zeile

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

CSS

HTML

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

zu setzen

Dies produziert, was ich erreichen möchte, aber gibt es eine Möglichkeit, beide h1 und p in .landing zu wickeln?

So etwas wie dieses

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

Answer 1

Keine diese Weise können Sie nicht in CSS verwenden können.

Aber Sie können SASS verwenden - syntaktisch Ehrfürchtig Sheet

http://sass-lang.com/

SASS ermöglicht es Ihnen, dynamische css wie Variablendeklaration zu schreiben und vieles mehr. Überprüfen Sie den obigen Link.

Answer 2

Sie könnten das tun, wenn wir einen CSS-Compiler wie weniger oder sass verwenden würden ... Ich denke, Sie können es nicht in reinem CSS tun.

Answer 3

Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung von Shadow DOM (noch nicht weit verbreitet). Dann könnte dein landing div eine Schattenwurzel sein und könnte ein eigenes Stylesheet haben ... das funktioniert im Grunde heute in Angular 2.