CSS -用于父级以下任何位置的第一个元素的选择器

Question

如何获得下面“标签1”的选择器而不必使用特定的div？我原以为#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的直接子元素，后者是其父级中的第一个子元素。

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=“包装器”//标签)1

我还没有发现它在css中的等价性。