CSS如何选中指定ID元素的多个子元素？有没有更简洁的写法？

解答 #

你尝试的嵌套写法没有生效是因为两种原因：如果是直接写在原生CSS文件中，旧版CSS原本不支持嵌套语法；如果是支持原生嵌套的新版浏览器，你的写法也不符合规范——逗号分隔的每一项选择器都需要显式写&指代父选择器，否则i会被识别为全局选择器。

目前有两种更简短的实现方式：

• 方式1：使用:is()伪类（兼容性最好，推荐）
  :is()伪类可以将多个选择器合并匹配，完全等效于你原来的写法，所有现代浏览器都支持：

#myDiv :is(span, i) {
  color: red;
}

• 方式2：使用原生CSS嵌套（仅适配新版浏览器）
  按照原生CSS嵌套的语法规则修正你的写法即可生效：

#myDiv {
  & span, & i {
    color: red;
  }
}

配合:is()可以进一步简化：

#myDiv {
  & :is(span, i) {
    color: red;
  }
}

内容的提问来源于stack exchange，提问作者Muhammet Yunus