Question

如何为以下html选择第一个跨度，第二个跨度或最后一个跨度？

<div>
    <b>Text<b/>
    <span></span>
    <span></span>
    <span></span>
</div>

如何选择给定集合中的第n个元素？

Answer 1

使用nth-child选择器：

span:nth-child(2) {}

由于它是第二个孩子，因此选择了第一个孩子。如果要选择第二个跨度，则可以改用它：

span:nth-of-type(2) {}

您还可以使用first-child，last-child，nth-child(odd)或nth-child(even)等。

Answer 2

如果我以这种方式编写代码，请使用第n个子元素，我指定背景色为每个

标记元素的第二个，它是父元素的第二个子元素：

p:nth-child(2) {
background: blue;
}

Answer 3

:nth-child选择器允许您根据公式根据源顺序选择一个或多个元素

该公式是使用语法an+b构建的，其中：

"a" is an integer value
"n" is the literal letter "n"
"+" is an operator and may be either "+" or "-"
"b" is an integer and is required if an operator is included in the formula

以下是您可以根据需要实现此目标的一些方法：

div span:first-child {

}
div span:nth-child(an+b) {

}
div span:last-child {

}

还有一些其他相对属性也可以使用：

nth-last-child
nth-of-type
nth-last-of-type
first-of-type
last-of-type

如何选择给定集合中的第n个元素

3 个答案: