如何用CSS选中#parentElement下所有#childElement并设置display:none？

嘿，这当然是更简单且更健壮的写法啊！

首先，你原来的代码用了**子组合器（>）**来严格指定层级：#parentElement>div>div>div>#childElement，这种写法非常依赖DOM结构的固定层级——只要中间的<div>层级发生变化（比如新增或减少一个嵌套层），这条CSS规则就会直接失效。

而要实现「#parentElement下所有#childElement都设置display: none」，你只需要用后代选择器（也就是两个选择器之间用空格分隔）：

#parentElement #childElement {
  display: none;
}

这种写法的优势在于：

• 语法更简洁，一眼就能看懂逻辑；
• 完全不依赖中间的DOM层级，不管#childElement在#parentElement下嵌套多深，都会被选中；
• 健壮性拉满，后续DOM结构调整只要不改变父子包含关系，样式就不会失效。

另外补充个小知识点：虽然HTML规范要求ID必须是页面唯一的，但实际开发中偶尔会遇到不规范的场景（或者你只是想精准限定父容器范围，避免影响其他可能存在的同名ID元素），这种后代选择器的写法就非常适用。

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