如何选择多个元素作为给定元素的子元素？

Question

我有<div id='mydiv'>,我需要选择所有pre和div孩子的元素#mydiv.

我可以这样做:

div#mydiv > pre, div#mydiv > div

但是,它可以这样做#mydiv只被引用一次吗？

div#mydiv > pre, div

将选择div页面上的所有s,无论它们是否为子级#mydiv,因此逗号不是一种方法.也许还有另一种我不知道的语法？

Answer 1

你必须引用#mydiv两次......

#mydiv > pre, #mydiv > div

我删除了无关div元素选择器,因为ID足够具体.

Answer 2

您实际上可以使用 来对选择器进行分组:is()。

所以在你的情况下你会这样使用它：

div#mydiv > :is(pre, div) {
     // CSS
}

这是文档https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Answer 3

据我所知,选择器分组没有简写.

请参阅" 选择器分组 ".

虽然使用LESS,但可以在"嵌套规则"部分中使用.

Answer 4

仅引用id一次的唯一方法是将它与*选择器一起使用:

#mydiv > * {

这将适用于该div的子元素的所有元素.

根据您计划应用的样式,这可能是可行的(我通常使用它来清零边距,填充和边框样式),但它仍然可能是第一种方式,因为它可以更容易地进行异常/更改后来在路上.