css - 如何从重复 ID（css）中缩短 css 代码

Question

如何缩短我的 CSS 代码？

HTML：

<div id="root">
    <p>Green</p>
    <h1>Blue</h1>
    <h3 class="brown">Brown</h3>
</div>

CSS：

#root p{ color:green; }

#root h1{ color:blue; }

#root .brown{ color:brown; }

我知道上面的代码工作正常。

但我可能只是想是否有任何方法可以缩短上面的 css 代码。我尝试了这些（下）但没有奏效。

#root{
  p{ color:green; },
  h1{ color:blue; },
  .brown{ color:brown; }
}

有人可以给我一个演示（codepen）如何做到这一点。需要你的帮助先生们..

标签： csscss-selectors

Answer 1

例如，您可以使用 SASS 来实现。

#root {
  p {color: green;}
  & h1 {color: blue;} 
  & h3 {color: brown;}
}

你可以在这里测试它，看看它是否有效：https ://www.sassmeister.com/

去这里了解如何在你的项目中安装它：https ://sass-lang.com/install

这就是它在 css 中的样子，但是使用 SASS