CSS中如何选择嵌套在父类容器内的子级类元素？

你使用的.container.asteroid属于交集选择器，仅会匹配同时拥有container和asteroid两个类名的元素，无法选中.container容器内部的.asteroid元素，所以样式不生效。

正确实现方式 #

方法1：使用后代选择器（推荐） #

两个类名中间加空格，即可匹配.container内部所有类名为asteroid的元素：

.container .asteroid {
  /* 可根据需求调整边框的粗细、样式、颜色 */
  border: 2px solid #333;
}

方法2：自定义统一类名 #

如果目标元素没有统一的asteroid类名，可以给两个目标元素添加相同的自定义类，比如border-target，再写对应样式：

.container .border-target {
  border: 2px solid #333;
}

方法3：结构伪类匹配（仅适合固定结构的场景） #

如果不想额外加类名，可以根据元素在.container内的位置用伪类匹配，示例如下（序号需要根据你实际的DOM结构调整）：

/* 匹配.container下的第1个和第3个子元素 */
.container :nth-child(1),
.container :nth-child(3) {
  border: 2px solid #333;
}

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