在一个id下包装多个CSS元素

Question

我正在尝试编写仅适用于某些Div的CSS。我有适用于此示例的代码，但我希望以不要求.landing放在每行前面的方式执行此操作

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;
  }

这会产生我想要完成的任务，但有没有办法将h1和p包裹在.landing中？

像这样的东西

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

Answer 1

这种方式不能在CSS中使用。

但你可以使用SASS - Syntactically Awesome StyleSheet

  

http://sass-lang.com/

SASS允许您编写动态css之类的变量声明等等。请查看以上链接。

Answer 2

如果我们使用css编译器（如less或sass），你可以这样做......我认为你不能用纯css来做。

Answer 3

实现此目的的另一种方法是使用Shadow DOM（尚未得到广泛支持）。那么，你的登陆div就是一个影子根，可以拥有自己的样式表...这基本上适用于今天的Angular 2。