我有一个html正文，如以下代码片段所示：
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”红色。这意味着页脚div中的“ h2”和“ p”不应被涂成红色，因为它们不是具有class =“ element”的div的子代。 。
我知道我可以像下面那样解决它，但是有很多重复。div.element>h1, div.element>h2, div.element>p {}
还有其他方法来选择具有不同标签的div的子代吗？请注意，我不需要任何答案来建议对html文档正文进行更改。我只对CSS选择器感兴趣。我还需要能够使用querySelectorAll在JavaScript中选择它。
<div>元素内选择所需的项目，就像这样