CSS如何选中且仅选中指定类名容器内的所有对应目标元素？

现有代码问题拆解 #

• .mid-container>h1：使用了>直接子选择器，仅能匹配.mid-container的一级直属子元素h1，如果h1嵌套在容器内部的其他标签（如div、article）中，就无法被选中，覆盖范围不全。
• .mid-container.h2：两个选择器之间无空格，会被CSS解析为「同时拥有mid-container类和h2类的元素」，完全不符合「选中容器内h2」的需求，因此不会生效。
• .mid-container h3：该写法是标准后代选择器，正常逻辑下只会选中.mid-container内部所有层级的h3，不会匹配容器外的元素。如果出现选到外部元素的情况，优先排查两点：
  1. HTML中.mid-container对应的标签没有正确闭合，导致浏览器误判外部元素属于容器内部
  2. 类名拼写错误（大小写不匹配、字符错漏）

正确实现代码 #

如果需要选中.mid-container内所有层级的对应元素，使用「容器选择器+空格+目标元素选择器」的格式即可，符合你需求的代码如下：

/* 匹配.mid-container内所有h1，不限嵌套层级 */
.mid-container h1 {
  color: #EAF6F6;
}

/* 匹配.mid-container内所有h2，不限嵌套层级 */
.mid-container h2 {
  color: #66BFBF;
}

/* 匹配.mid-container内所有h3，不限嵌套层级 */
.mid-container h3 {
  color: #11999E;
}

如果确实只需要匹配容器的一级直属子元素，再在中间添加>符号即可。

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