2

假设我有一个像这样的小 html 区域：

<div id="somecontainer">
   <h1>text</h1>
   <h2>text</h2>
   <h3>text</h3>
   <p>text</p>
</div>

现在我想用 CSS 为该容器的几个子元素设置样式。目前我这样做，但它看起来比它可能需要更复杂：

#somecontainer h1,#somecontainer h3,#somecontainer p { color:red; }

有什么办法可以为 CSS 代码“分组”这些子元素，所以我不必#somecontainer三次提及容器 ID？

我想也许像一个运算符之类的东西会使语法变成类似的东西#somecontainer h1+h3+p（对于这个例子+，假设是这个运算符）。CSS中有这样的东西吗？

4

2 回答 2

4

使用纯 CSS，这将针对 #somecontainer 的所有直接子级：

#somecontainer > *

然后你可以恢复你在 H2 上设置的任何内容。例如

#somecontainer > * {color: red;}
#somecontainer > h2 {color: black};

但这并不是一种特别有效的编写方式。我会坚持明确地编写类，或者理想情况下研究使用像Less或Sass这样的预处理器，你可以在其中编写：

#somecontainer {
    h1, h3, p {
        color: red;
    }
}

这会输出你最终想要的，这个 -

#somecontainer h1 {color: red;}
#somecontainer h3 {color: red;}
#somecontainer p {color: red;}
于 2013-03-17T11:38:05.870 回答
1

这是你的核心问题：

有什么办法可以为 CSS 代码“分组”这些子元素，所以我不必三次提及容器 ID #somecontainer？

现在，您设想的分组实际上并不存在。但是由于您的问题是关于减少 CSS 代码，尤其是跨多种元素类型，那么这正是 CSS 中类的重点——可以应用于多个元素，但在 CSS 中具有单一、简洁的表示。有时在尝试进行花哨的选择时，我们忘记了 CSS 的简单性。

因此，可能仍然可以根据其容器更改值的某种通用类。然后，您可以选择使用该类来设置一个或另一个元素，具体取决于您可能需要设置的数量。这就是我的意思：

选项 1（更多 HTML 更改，更少 CSS 代码）

HTML

<div id="somecontainer">
   <h1 class="setColor">text</h1>
   <h2>text</h2>
   <h3 class="setColor">text</h3>
   <p class="setColor">text</p>
</div>

CSS

#somecontainer .setColor {
  color: red;
}

选项 2（更少的 HTML 更改，稍微更多的 CSS）

HTML

<div id="somecontainer">
   <h1>text</h1>
   <h2 class="setColor">text</h2>
   <h3>text</h3>
   <p>text</p>
</div>

CSS

#somecontainer {
  color: red;
}

#somecontainer .setColor {
  color: black;
}

这里的重点是样式的“分组”正是类的含义。如果您决定将另一个元素切换为该颜色，则添加该类。

于 2013-03-23T13:32:19.773 回答