为不同页面使用不同颜色的更好方法

Question

我目前为不同的页面使用不同的颜色，然后在 body-tag 中这样调用它们

CSS:

#theme-green .whateverdiv {color: green;}

HTML:

<body id="theme-green">

问题是当我有很多元素需要设置样式时，我是必须在每个元素上添加 #theme-green 还是我可以 "wrap" #theme-green 下的所有元素标签？

我要找的是这样的：

#theme-green
{
   .thingnumber1 {stuff here;}
   .thingnumber2 {stuff here;}
   .thingnumber3 {stuff here;}
}

而不是这个：

#theme-green .thingnumber1 {stuff here;}
#theme-green .thingnumber2 {stuff here;}
#theme-green .thingnumber3 {stuff here;}

亲切的问候，

埃米尔

Answer 1

不，你不能，至少 CSS 是纯的。

假设您的元素共享共同的样式，您的 CSS 需要像这样构建...

#theme-green .thingnumber1,
#theme-green .thingnumber2,
#theme-green .thingnumber3 {
    stuff here;
}

如果您想按照问题中的建议进行操作，可以使用 CSS 预处理器，例如 SASS or LESS.

Better way of using different colors for different pages