Question

假设我有一些像这样的HTML：

<div id="Group1">
  <p class="first">Lorem <span class="special">ipsum</span></p>
  <p class="second">Lorem ipsum</p>
  <p class="third">Lorem ipsum</p>
</div>
<div id="Group2">
  <p class="first">Lorem <span class="special">ipsum</span></p>
  <p class="second">Lorem ipsum</p>
  <p class="third">Lorem ipsum</p>
</div>

要以不同的方式设置段落样式，我必须像这样声明我的CSS：

#Group1 p.first {
  color: blue;
}
#Group1 span.special {
  color: green;
}
#Group2 p.first {
  color: red;
}
#Group2 span.special {
  color: orange;
}

有没有办法对声明进行分组，所以我不必重复＃Group1和＃Group2（类似这样）：

#Group1 {
  p.first {
    color: blue;
  }
  span.special {
    color: green;
  }
}
#Group2 {
  p.first {
    color: red;
  }
  span.special {
    color: orange;
  }
}

当你有很多选择器时，总是重新输入会很麻烦。有没有办法在CSS中做到这一点 - 这将是一个很好的速记！

Answer 1

CSS预处理器提供了编写编译成CSS的更简洁样式的功能。

截至撰写本文时，

LESS，Sass和Stylus是最受欢迎的*。每个功能都有一些略有不同，但所有功能都支持选择器分组，如您所示：

<子>预处理器：

#Group1 {
  p.first {
    color: blue;
  }
  span.special {
    color: green;
  }
}

_编译CSS：

#Group1 p.first {
  color: blue;
}
#Group1 span.special {
  color: green;
}

就原始CSS而言，目前没有任何以这种方式对选择器进行分组的标准化方法。我的建议是尝试一些CSS预处理器并坚持最适合你的那个。从我的主观经验来看，他们使项目中的大量CSS更容易维护。

_{*它们按字母顺序列出，而不是按受欢迎程度列出，可能会有变化}

Answer 2

你应该尝试使用LESS。您可以在此处找到更多信息：LESSCSS

我可以在CSS中组合多个样式声明吗？

2 个答案: