如何通过子类名选择父元素的第一个子元素？React图片上传器样式问题

你的选择器逻辑搞反了，div:has(> .preview-images):first-child 实际是在找本身是父元素第一个子元素，且包含直接子元素 .preview-images 的div，而不是你想要的「包含 .preview-images 的div下的第一个 .preview-images 子元素」。

正确的选择器写法 #

要选中目标元素，你需要把 :first-child 作用在 .preview-images 上，而不是父div：

div:has(> .preview-images) > .preview-images:first-child {
  background-color: #your-target-color;
}

如果这个div的直接子元素全是 .preview-images，可以简化成：

div > .preview-images:first-child {
  background-color: #your-target-color;
}

为什么原来的选择器不生效 #

伪类的作用对象是它前面的选择器主体：

• div:has(> .preview-images) 先筛选出所有包含直接子元素 .preview-images 的div
• 后面的 :first-child 是给这些div加的条件，要求它们必须是自己父元素的第一个子元素
  这和你要选中「div的第一个子元素（.preview-images）」的需求完全不匹配，所以自然不会生效。

React场景额外提醒 #

如果是动态渲染的图片列表，确保没有其他更高优先级的样式覆盖这个规则（比如组件内的style属性、更具体的嵌套选择器）。可以暂时用!important测试验证（不推荐长期使用），或者提升选择器特异性，比如加上父容器的类名：

.image-uploader-wrapper > div > .preview-images:first-child {
  background-color: #your-target-color;
}

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