Как выбрать n-й элемент в данном наборе

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

Селектор :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

Answer 3

используйте n-й дочерний элемент, если я создаю этот код, например, таким образом. I Укажите, что цвет фона синий для каждого элемента тега

, который является вторым дочерним элементом этого родительского элемента:

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