CSS - 父项下任何位置的第一个元素的选择器

Question

如何在不使用特定 div 的情况下获取下面“标签 1”的选择器？ 我认为#wrapper label:first-of-type可以解决问题，但这似乎是选择每个标签。

<div id="wrapper">
    <div class="row">
        <div class="content-1">
            <label>Label 1</label>
        </div>
        <div class="content-2">
            <label>Label 2</label>
        </div>
        <div class="content-3">
            <label>Label 3</label>
        </div>
        <div class="content-4">
            <label>Label 4</label>
        </div>
    </div>
</div>

Answer 1

#wrapper label:first-of-type不起作用，因为每个label都是其直接父级中的第一个类型。 这是这里的关键，这些类型的选择器总是相对于直接父级。

所以，你可以做这样的事情：

#wrapper div:first-child > label

这将选择任何label元素，这些元素是div的直接子元素， div是其父元素中的第一个子元素

Answer 2

使用 nth-child

 #wrapper .content-1:nth-child(1) label{ background: red; }

 <div id="wrapper"> <div class="row"> <div class="content-1"> <label>Label 1</label> </div> <div class="content-2"> <label>Label 2</label> </div> <div class="content-3"> <label>Label 3</label> </div> <div class="content-4"> <label>Label 4</label> </div> </div> </div>

Answer 3

Xpath 可以很容易地做到这一点，它会是这样的： (///*[@id="wrapper"]//label)[1]

我还没有在 css 中找到它的等效性。