我有一个 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
TA贡献1828条经验 获得超13个赞
如果您想使用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
TA贡献1868条经验 获得超4个赞
在 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中使用这个类来选择它们。
- 2 回答
- 0 关注
- 61 浏览
添加回答
举报
0/150
提交
取消