我正在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>
这是我所能得到的最远的结果,我已经使用has(<
选择了directparent
..但是我不能得到这个的first-child
。为什么div:has(> .preview-images):first-child{
不起作用?根据问题Like This One和This One-嵌套的伪选择器应该在这里起作用。我做错了什么?
3条答案
按热度按时间wmomyfyw1#
您可以简单地使用
:first-of-type
CSS伪类,它表示一组兄弟元素中该类型的第一个元素。在您的示例中,子元素可以拥有该类,因此可以直接使用伪类,如下所示:您可以像下面这样修改代码,
x一个一个一个一个x一个一个二个x
dtcbnfnu2#
你想要
div.preview-images:first-child:has( > img)
,你试图用你的方法选择一个div的子元素,这个div的类是preview-images,但是这个类并不存在,修改后的选择器选择的div的类是preview-images,这个类是第一个子元素,并且有一个image作为它的子元素。ix0qys7i3#
使用div:has(. preview-images)选择具有. preview-images类的子项的div,然后使用. preview-images:first-child img选择. preview-images子项的第一个图像,如下所示
希望这能有所帮助。注意它可能在firefox上不起作用,但希望很快就能解决。