如何使用CSS伪选择器仅选中目标容器而不匹配其子元素

问题原因 #

• #section和:nth-child(3)之间多了一个空格，这个空格是后代组合符，会匹配#section下所有DOM层级中、在自身父节点里排第3位的元素，选择范围会穿透到容器内部，自然会选中不该选的子元素。
• 索引值写错了：三个.container是#section的第一层直接子元素，序号从1开始计数，中间的容器排在第2位，不是第3位。

正确写法 #

用直接子组合符>限制选择范围只在#section的第一层子元素中匹配，就不会误选容器内部的内容，代码如下：

#section > .container:nth-of-type(2) {
    background-color: red;
}

如果不想绑定类名，也可以简化写成：

#section > :nth-child(2) {
    background-color: red;
}

写法说明 #

• >是直接子组合符，只会匹配#section下第一层的子节点，不会向内层DOM遍历，从根源上避免选中容器里的h3、p等内容
• nth-of-type(2)会匹配同标签类型、带container类的元素中排第2位的节点，精准定位中间的容器，不会和其他元素混淆
• 之前用nth-of-type、nth-child没生效，本质都是没加>限制选择层级，导致选择器匹配到了内层的文本元素。

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