如何选择CSS中父元素的后代的多个元素？

Question

在同一DIV下的多个元素如何无需重复DIV的名称？我知道我能够使用以下CSS代码选择父级的多个元素，

.container h3,
.container p {
  text-align: left;
}

但是，是否有其他短途方法来定位h3和p标签在下.Container div？

Answer 1

我建议使用 - 相对较新的 - ：is（）语法：

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  border: 0.3em solid rebeccapurple;
  margin-block: 1em;
  margin-inline: auto;
  width: clamp(30em, 50vw, 600px);
}

.container :is(h3, p) {
  border: 1px solid #000;
  color: rebeccapurple;
  margin-block: 1em;
  margin-inline: auto;
  padding-inline: 1em;
  width: 80%;
}

<h3>A <h3> element, that should probably be a <h2></h3>
<div class="container">
  <h3>A properly-used, and selected, <h3> element</h3>
  <p>...and an adjacent <p> element.</p>
</div>
<p>Some text in a paragraph that shouldn't be styled.</p>

参考：

• 。

Answer 2

在香草CSS中，您拥有的是最好的方法。如果您使用CSS预编译器，例如 sass ，您可以改为嵌套对象，以使您的代码看起来像这样看起来像这样：

.container {
  h3, p {
    text-align: left;
  }
}