Question

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

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

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

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

我从来没有读过任何有关这方面的内容，只是认为它在我们的案例中非常有用并且可能在过去曾被考虑过了？

干杯保罗

Answer 1

您可以将嵌套样式与Sass或Less一起使用。在这种情况下，我建议您在HTML结构中经常组合使用一个额外的树类，例如，当您具有列状结构时。

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

CSS

.combinedclass {
    // Styles here
}

Answer 2

不，那是不可能的。你可以使用像Less或Sass这样的东西，你可以像这样嵌套，但是需要将它们编译成CSS。

除此之外，你必须使用：

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

Answer 3

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

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

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

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

Answer 4

您可以使用

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

如果您想要将某些内容应用于所有类或

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

Answer 5

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

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

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

Answer 6

一个字：LESS。

在开发过程中使用less.js并在推送到生产时编译为缩小的CSS文件。