我可以选择具有特定类的特定元素的所有子元素，而无需为每个子元素编写选择器列表吗？
我有一个 html-body，如以下代码片段所示：
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>
现在我想将class=" element" 的“ div ”子级的所有“ h1 ”、“ h2 ”和“ p ”元素着色为红色。这意味着 footer-div 中的“ h2 ”和“ p ”不应该被涂成红色，因为它们不是class="element"的div的子级。
我知道我可以像下面这样解决它，但有很多重复。
div.element>h1, div.element>h2, div.element>p {}还有其他方法可以选择具有不同标签的 div 的子级吗？
请注意，我不想要任何建议更改我的 html 文档正文的答案。我只对 css 选择器感兴趣。我还需要能够使用 querySelectorAll 在 JavaScript 中选择它。
噜噜哒2回答
-
慕田峪7331174
如果您想使用querySelectorAll，就像您在第一个答案的评论中所说的那样（您的问题中不清楚），那么解决方案是依次使用两个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但到那时，在样式表中使用可能会更直接。 -
MYYA
在 vanilla 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中使用这个类来选择它们。
随时随地看视频慕课网APP
相关分类
Html5