我可以选择具有特定类的特定元素的所有子元素，而无需为每个子元素编写选择器列表吗？答案

【问题标题】：Can I select all child elements of a specific element with a specific class without writing a list of selectors for each child?我可以选择具有特定类的特定元素的所有子元素，而无需为每个子元素编写选择器列表吗？
【发布时间】：2023-03-29 00:05:01
【问题描述】：

我有一个 html-body，如下代码-sn-p：

div.element>h1, h2, p {
  color: red
}

.footer {
  background-color: blue
}

<html>

<body>
  <div id="1">
    <div class="element">
      <h1>Test 1</h1>
      <span>Link to interesting <a href="https://google.com">site A</a></span>
    </div>
  </div>

  <div id="2">
    <div class="element">
      <h2>Test 2</p>
      <span>Link to interesting <a href="https://google.com">site B</a></span>
    </div>
  </div>

  <div id="3">
    <div class="element">
      <h3>Dont color me red!</h3>
      <p>Test 3</p>
      <span>Link to interesting <a href="https://google.com">site C</a></span>
    </div>
  </div>

  <div class="footer">
    <h2>This is my footer</h2>
    <p>Do not color this text red!</p>
  </div>
</body>

</html>

现在我想为所有“h1”、“h2”和“p”元素着色，它们是“”的子元素div”，其中 class="element" 为红色。这意味着 footer-div 中的“h2”和“p”不应被涂成红色，因为它们不是 div的子元素> 带有 class="element"。

我知道我可以像下面这样解决它，但是有很多重复。

div.element>h1, div.element>h2, div.element>p {}

还有其他方法可以选择具有不同标签的 div 的子项吗？

请注意，我不想要任何建议更改我的 html 文档正文的答案。我只对 css-selector 感兴趣。我还需要能够使用 querySelectorAll 在 JavaScript 中选择它。

【问题讨论】：

所以你的问题归结为还有比div.element>h1, div.element>h2, div.element>p {}更简洁的东西吗？
如果你只想要h1h2和p在.element下，那么你只能使用你已经知道的选择器。如果您想要.element 的任何孩子，您可以使用.element > *
@GabrielePetrioli 抱歉，这行不通。我还有其他不应该用红色着色的元素。让我更新我的问题
那么div.element>h1, div.element>h2, div.element>p {} 是要走的路。如果您知道.element 类的应用位置，您也可以省略div 部分。所以.element>h1, .element>h2, .element>p {}。根据您构建代码的方式，您可以使用 less 或 sass 之类的 CSS 预处理器。
将来您可以使用:is 选择器，它现在需要供应商前缀，因此它违背了编写更少代码的目的。

标签： javascript html css css-selectors

【解决方案1】：

如果您想使用 querySelectorAll，就像您在 cmets 中对第一个答案所说的那样（您的问题中并不清楚），那么解决方案是依次使用两个 querySelectorAlls。

document.querySelectorAll('div.element').forEach(
  el => el.querySelectorAll('h1, h2, p').forEach(
    el => el.style.color = 'red'
  )
);

.footer {
  background-color: blue
}

<div id="1">
    <div class="element">
      <h1>Test 1</h1>
      <span>Link to interesting <a href="https://google.com">site A</a></span>
    </div>
  </div>

  <div id="2">
    <div class="element">
      <h2>Test 2</p>
      <span>Link to interesting <a href="https://google.com">site B</a></span>
    </div>
  </div>

  <div id="3">
    <div class="element">
      <h3>Dont color me red!</h3>
      <p>Test 3</p>
      <span>Link to interesting <a href="https://google.com">site C</a></span>
    </div>
  </div>

  <div class="footer">
    <h2>This is my footer</h2>
    <p>Do not color this text red!</p>
  </div>

但此时在样式表中使用div.element>h1, div.element>h2, div.element>p 可能更直接。

【讨论】：

【解决方案2】：

在原版 CSS 中，您可以在 <div> 元素中选择所需项目的最干净的方式就是这样

.element h1, .element h2, .element p {}

如果您想要更简洁、更整洁的 CSS 代码，您可以随时查看 SASS。

在 SASS 中它看起来像这样：

.element { 
  h1, h2, p { 
    color: red 
  } 
}

您可以在这里找到 SASS：https://sass-lang.com/

在 JS 中的选择不会因使用预处理器而改变。预处理器所做的只是允许您以某种方式编写 CSS，然后将其转换为普通 CSS 以供浏览器读取。

因此，如果你想通过 JS 以最简洁的方式选择 .element h1、.element h2、.element p，我会给这些特定元素一个类，例如“red”，然后在 JS 中使用这个类选择它们。

【讨论】：

所以在 js 中我会写 .querySelectorAll(".element {h1, h2, p}")?
非常感谢您的回答，非常有趣。我从来没有听说过。不幸的是，我们不愿意为这样一个小问题绑定整个 css 扩展，但很高兴知道其他项目......