我可以选择具有特定类的特定元素的所有子元素，而无需为每个子元素编写选择器列表吗？
[英]Can I select all child elements of a specific element with a specific class without writing a list of selectors for each child?
问题描述
I have a html-body like in the following code-snippet:
我有一个类似于以下代码片段的 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>
Now I would like to color all " h1 ", " h2 " and " p " elements that are a child of a " div " with class="element" in red.现在，我想所有的颜色“H1”，“H2”和“p”元素是一个“格”，在红色类=“元素”的孩子。 This means that the " h2 " and " p " in the footer-div should not be colored red since they are not a child of a div with class="element" .这意味着页脚 div 中的“ h2 ”和“ p ”不应为红色，因为它们不是class="element"的div的子级。
I am aware that I could solve it like the following but there is a lot of repetition.我知道我可以像下面这样解决它，但有很多重复。
div.element>h1, div.element>h2, div.element>p {}
Is there any other way to select children of a div with different tags?有没有其他方法可以选择具有不同标签的 div 的子项？
Note that I do not want any answers suggesting changes to the body of my html document.请注意，我不希望任何建议更改我的 html 文档正文的答案。 I am only interested in the css-selector.我只对 css-selector 感兴趣。 I also need to be able to select it in JavaScript using querySelectorAll.我还需要能够使用 querySelectorAll 在 JavaScript 中选择它。
2 个解决方案
解决方案1
1 2020-03-26 13:36:26
Within vanilla CSS, the cleanest you can select the required items inside the <div> element, is like so在 vanilla CSS 中，您可以在<div>元素中选择所需项目的最干净方式是这样
.element h1, .element h2, .element p {}
If you want more succinct tidier code for CSS you could always look into SASS.如果你想要更简洁的 CSS 代码，你可以随时查看 SASS。
In SASS it would look like so:在 SASS 中，它看起来像这样：
.element {
h1, h2, p {
color: red
}
}
You can find SASS here: https://sass-lang.com/你可以在这里找到 SASS： https : //sass-lang.com/
Selecting in JS will not change based on using a preprocessor. JS 中的选择不会因使用预处理器而改变。 All the preprocessor does is allow you to write CSS in a certain way, then converts it to normal CSS for the browser to read.预处理器所做的只是让您以某种方式编写 CSS，然后将其转换为普通 CSS 以供浏览器读取。
Hence if you want to select .element h1, .element h2, .element p in the cleanest way via JS, I would give those specific elements a class, for instance "red", and then use this class in JS to select them.因此，如果你想通过 JS 以最干净的方式选择 .element h1、.element h2、.element p，我会给这些特定元素一个类，例如“红色”，然后在 JS 中使用这个类来选择它们。
解决方案2
1 已采纳 2020-03-27 19:14:33
If you want to use querySelectorAll , like you say in the comments to the first answer (which wasn't clear in your question), then the solution is to use two querySelectorAll s in sequence.如果您想使用querySelectorAll ，就像您在对第一个答案的评论中所说的那样（在您的问题中不清楚），那么解决方案是按顺序使用两个querySelectorAll 。
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>
But at that point it might be more straightforward to just use div.element>h1, div.element>h2, div.element>p in the stylesheet instead.但到那时，在样式表中使用div.element>h1, div.element>h2, div.element>p可能会更直接。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.