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

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

CSS:

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

HTML:

<body id="theme-green">

问题是当我有很多元素需要设置样式时，我是否必须在每个元素上添加 #theme-green 或者我可以将所有元素“包装”在 下#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;}

亲切的问候，

埃米尔

最佳答案

不，你不能，至少使用纯 CSS。

假设您的元素共享通用样式，您的 CSS 将需要像这样构造...

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

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

关于css - 为不同页面使用不同颜色的更好方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29966771/