使用css在div中定位html元素

Question

以这个HTML为例，是否可以单独定位给定<div>内的所有元素，而无需更改每个CSS选择器。

<div id="div1">
  <h3>h3 div 1</h3>
  <!-- whole bunch of html here -->
</div>
<div id="div2">
  <h3>div 2</h3>
  <!-- whole bunch of html here -->
</div>

这就是我通常的做法......

#div1 > h3 {
  background-color: lightblue;
}

但是我正在寻找这样的解决方案（将其视为伪代码）

#div2 {
  h3 {
    background-color: lightgreen;
  }
}

这也是一个小提琴：https://jsfiddle.net/8bstkq7u/1/

Answer 1

如果使用scss，则可以使用此语法。将css改为你的小提琴，你的代码就可以了。

本指南是一个很好的起点：SASS