css - 将容器中的多个选择器定位为新的不同样式

Question

假设我们有几个元素（p, h4, h5, h6, label）包含在div.container. 所有元素都已在容器外设置样式

p, h4, h5, h6, label{color: #fff;}

但是当它们包含在那个特殊的容器中时，我们想为它们设置新的样式，所以我通常会写：

div.container p, div.container h4, 
div.container h5, div.container h6, 
div.container label{color: #ddd;}

一切都很好，只是这太长了，太编码了。有没有办法（更短的编码）来定位所有这些元素？像：

div.container [p, h4, h5, h6, label] {color: #ddd;}

注意：我不想使用预处理器。

score 0 · Accepted Answer

不是在纯 CSS 中，而是在 SCSS ( Sass ) 中：

div.container {
  p, h4, h5, h6, label {color: #ddd;}
}

score 0 · Accepted Answer

0

没有预处理器就没有绝对的方法可以做到这一点。

于 2012-06-13T07:30:40.300 回答

score -1 · Accepted Answer

如果没有有关您的标记的更多信息，我只能说：

您可以删除标签选择器（这是不必要的。）：

.container p,
.container h4, 
.container h5,
.container h6, 
.container label {
    color: #ddd;
}

另一方面，您可以使用 CSS 的级联原则并添加所有、、和p相同h4的h5类（例如），然后您可以像这样堆叠 CSS：h6label.example

.example { color: #fff; }
.container .example { color: #ddd; }

3 回答 3