CSS-将多个选择器分组以应用于一个ID

我们希望为客户端设置一个移动样式表-由于系统设置，我们只能包含一个样式表

每个页面都有一个ID，由于站点的设计，我们希望能够以稍微不同的方式定位每个页面中的元素

我知道我们可以通过#home.classname{}定位类来实现这一点，但我想知道是否有任何方法可以将一组类分组在一个前缀下，而不是单独分组，例如——

 #home{
  .classname1{}
  .classname2{}
  .classname3{}
 } 

我从来没有读过关于这方面的任何东西，只是认为这对我们的情况非常有用，而且可能在过去就已经考虑过了

干杯

---

保罗：不，那是不可能的。您可以使用Less或Sass之类的东西，它们允许您进行这样的嵌套，但它们需要编译为CSS

除此之外，您还必须使用：

#home .classname1{}
#home .classname2{}
#home .classname3{}

---

以嵌套样式编写CSS是无效的

 #home{
  .classname1{}
  .classname2{}
  .classname3{}
 } 

您可以按以下格式编写CSS：

#home .classname1{}
 #home .classname2{}
 #home .classname3{}

你可以用

#home .classname1, #home .classname2, #home .classname3
{
}

如果您希望将某些内容应用于所有类或

#home .classname1{}
#home .classname2{}
#home .classname3{}

---

可以将嵌套样式与或一起使用。 在本例中，我建议您使用一个额外的树类类，这些树类经常组合在HTML结构中，例如，当您有柱状结构时

<div class="classname1 combinedclass"></div>
<div class="classname2 combinedclass"></div>
<div class="classname2 combinedclass"></div>

---

您正在寻找CSS扩展库。最受欢迎的两种是：

使用其中任何一种，您都可以以这种方式组合您的风格

#home{
  .classname1;
  .classname2;
  .classname3;
 } 

一个字：

只需在开发时使用

less.js

，在投入生产时编译成一个小型CSS文件

#home{
  .classname1;
  .classname2;
  .classname3;
 }