CSS 通过子项的类名选择父项的第一个子项

Question

我正在React中构建一个图像上传器，并且几乎完成了。我的下一步是尝试让渲染div的第一个子元素具有不同的背景颜色，表明它是"主要的";选择照片。渲染看起来像:

.preview-images{
width: 250px;
border-bottom: 1px solid #BBB;
border-right: 2px solid #BBB;
border-radius: 10px;
margin-bottom: 20px;
padding: 15px;
font-size: 30px;
display: inline-grid;
margin-right: 20px;
}
div:has(> .preview-images){
border: 5px solid #FF0000;
}

<div> <!-- This is the direct parent -- It is a rendered react element, I cannot give an ID or Class -->
<div class="preview-images"> <!-- This is the first child -->
<img src=. ..>
</div>
<div class="preview-images"> <!-- This is a direct child -->
<img src=. ..>
</div>
<div class="preview-images"> <!-- This is a direct child -->
<img src=. ..>
</div>
</div>

这是我能得到的最远的地方，我选择了直接parent使用has(<..但是我无法得到这个的first-child。为什么div:has(> .preview-images):first-child{不工作?根据像这个和这个这样的问题，嵌套的伪选择器应该在这里工作。我做错了什么?

Answer 1

您可以简单地使用:first-of-typeCSS伪类，它表示在一组兄弟元素中其类型的第一个元素。在你的例子中，子类可以有这个类，所以直接使用伪类，像这样，

div.preview-images:first-of-type {
/* your stuff here */
}

你可以像下面这样修改你的代码，

.preview-images{
width: 250px;
border-bottom: 1px solid #BBB;
border-right: 2px solid #BBB;
border-radius: 10px;
margin-bottom: 20px;
padding: 15px;
font-size: 30px;
display: inline-grid;
margin-right: 20px;
}
div.preview-images:first-of-type {
border: 5px solid #FF0000;
}

<div> <!-- This is the direct parent -- It is a rendered react element, I cannot give an ID or Class -->
<div class="preview-images"> <!-- This is the first child -->
<img src=. ..>
</div>
<div class="preview-images"> <!-- This is a direct child -->
<img src=. ..>
</div>
<div class="preview-images"> <!-- This is a direct child -->
<img src=. ..>
</div>
</div>

Answer 2

您需要div.preview-images:first-child:has( > img)。使用您的方法，您将尝试选择具有preview-images类的div的子元素，这并不存在。修改后的选择器选择带有preview-images类的div，它是第一个子类，并且有一个图像作为它的子类。

.preview-images {
width: 250px;
border-bottom: 1px solid #BBB;
border-right: 2px solid #BBB;
border-radius: 10px;
margin-bottom: 20px;
padding: 15px;
font-size: 30px;
display: inline-grid;
margin-right: 20px;
}
div.preview-images:first-child:has( > img) {
border: 5px solid #FF0000;
}

<div>
<!-- This is the direct parent -- It is a rendered react element, I cannot give an ID or Class -->
<div class="preview-images">
<!-- This is the first child -->
<img src=. ..>
</div>
<div class="preview-images">
<!-- This is a direct child -->
<img src=. ..>
</div>
<div class="preview-images">
<!-- This is a direct child -->
<img src=. ..>
</div>
</div>

Answer 3

使用div:has(.preview-images)选择具有.preview-images子类的div，然后使用.preview-images:first-child img选择.preview images子类的第一个图像，如下所示

希望这对你有帮助。请注意，它可能无法在firefox上工作，但希望很快就能解决这个问题。

div:has(.preview-images) .preview-images:first-child img {
outline: 2px solid red;
}

<div>
<!-- This is the direct parent -- It is a rendered react element, I cannot give an ID or Class -->
<div class="preview-images">
<!-- This is the first child -->
<img src='https://picsum.photos/id/237/200'>
</div>
<div class="preview-images">
<!-- This is a direct child -->
<img src='https://picsum.photos/id/238/200'>
</div>
<div class="preview-images">
<!-- This is a direct child -->
<img src='https://picsum.photos/id/239/200'>
</div>
</div>