如何仅覆盖带有'first'类的元素的子元素样式？

要只给.first容器下的.item元素覆盖样式，用CSS的层级选择器就能搞定，两种常用写法：

• 匹配所有嵌套的.item：如果要作用于.first里所有层级的.item（包括直接子元素、更深层的后代元素），用空格连接两个类选择器：

.first .item {
  /* 这里填写需要覆盖的样式 */
  color: red;
  font-size: 16px;
}

• 仅匹配直接子级的.item：如果只想修改.first直接下属的.item元素，用>连接选择器：

.first > .item {
  /* 示例覆盖样式 */
  background-color: #f5f5f5;
}

这种写法的核心是通过父元素的类名限定样式作用范围，只会对.first容器内的.item生效，不会影响.second或其他容器里的同名元素。同时，这种组合选择器的优先级比单独的.item选择器更高，能直接覆盖原有样式。

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