Javascript 我是否可以选择具有特定类的特定元素的所有子元素，而不为每个子元素编写选择器列表？

我有一个html正文，如以下代码段所示：

div.element>h1、h2、p{
颜色：红色
}
.页脚{
背景颜色：蓝色
}

测试1
链接到有趣的
测试2

链接到有趣的
别把我涂成红色！
测试3

链接到有趣的
这是我的页脚
不要将此文本涂成红色

在vanilla CSS中，您可以在

元素中选择所需的最干净的项，如下所示

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

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

在SASS中，看起来是这样的：

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

您可以在此处找到SASS：

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

---

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

如果您想使用

querySelectorAll

，就像您在对第一个答案的评论中所说的（在您的问题中不清楚），则解决方案是依次使用两个

queryselectoral

s

document.querySelectorAll（'div.element'）.forEach(
el=>el.querySelectorAll（'h1，h2，p'）.forEach(
el=>el.style.color='red'
)
);
.footer{
背景颜色：蓝色
}

测试1
链接到有趣的
测试2

链接到有趣的
别把我涂成红色！
测试3

链接到有趣的
这是我的页脚
不要将此文本涂成红色

所以你的问题归结为是否有比
div.element>h1，div.element>h2，div.element>p{}
更简洁的东西？如果你只想
h1
h2
和
p
在
元素下，那么你只能使用你已经知道的选择器。如果您想要
.element
的任何子元素，您可以使用
.element>*
@gabrieleptetrioli抱歉，这不起作用。我还有其他不应该用红色的元素。让我更新我的问题，然后是
div.element>h1，div.element>h2，div.element>p{}
。如果知道
.element
类将应用于何处，也可以省略
div
部分。所以
.element>h1、.element>h2、.element>p{}
。根据您构建代码的方式，您可以使用css预处理器，如
less
或
sass
。将来您可以使用选择器，它现在需要供应商前缀，因此无法实现编写更少代码的目的。因此，在js中，我将编写.querySelectorAll（.element{h1，h2，p}”）？非常感谢您的回答，非常有趣。我从来没有听说过。不幸的是，我们不愿意为这样一个小问题绑定一个完整的css扩展，但是对于其他项目来说，知道这一点很好。。。