Question

如何获得＆＃34;标签1＆＃34;的选择器？下面没有使用特定的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="wrapper"]//label)[1]

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

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

3 个答案: