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

Question

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

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

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

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

我从来没有读过任何关于这个的东西，只是认为它在我们的案例中真的很有用，并且过去可能已经考虑过？

干杯保罗

score 2 · Accepted Answer

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

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

CSS

.combinedclass {
    // Styles here
}

score 0 · Accepted Answer

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

除此之外，您必须使用：

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

score 0 · Accepted Answer

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

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

您可以将 CSS 编写为以下格式：

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

score 0 · Accepted Answer

你可以使用

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

如果您想将某些东西应用于所有课程或

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

一个字：少。

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

6 回答 6