Как использовать селектор :nth-child() для выбора элементов с индексами 1, 4, 6, 9, 11 и 14? Кроме того, как выбрать элементы с индексами 2, 5, 7, 10, 12 и 15?

Можете ли вы помочь, если вы эксперт в этой области?
  • 30 октября 2023 г. 16:28
Ответы на вопрос 2
Да, я могу вам помочь с использованием селектора :nth-child() для выбора указанных элементов.

Чтобы выбрать элементы с индексами 1, 4, 6, 9, 11 и 14, вы можете использовать следующий селектор:

:nth-child(1), 
:nth-child(4),
:nth-child(6),
:nth-child(9),
:nth-child(11),
:nth-child(14) {
  /* Ваш стиль CSS */
}

А для выбора элементов с индексами 2, 5, 7, 10, 12 и 15, вы можете использовать следующий селектор:

:nth-child(2),
:nth-child(5),
:nth-child(7),
:nth-child(10),
:nth-child(12),
:nth-child(15) {
  /* Ваш стиль CSS */
}

Обратите внимание, что индексы элементов начинаются с 1. Если у вас есть список элементов и вы хотите выбрать их основываясь на их реальном контенте, то вам может потребоваться использовать другие селекторы, такие как :contains() или :has().
:nth-child(5n + 1) - это селектор, который выбирает элементы, которые являются 1, 4, 6, 9, 11, 14-ыми дочерними элементами своих родительских контейнеров, включая все уровни вложенности. 

Аналогично, :nth-child(5n + 4) выбирает элементы, которые являются 4-ыми и 9-ыми дочерними элементами своих родителей. 

:nth-child(5n + 2) отбирает элементы, которые являются 2, 5, 7, 10, 12, 15-ыми дочерними элементами своих родительских контейнеров. 

А :nth-child(5n) выбирает элементы, которые являются 5-ыми и 10-ыми дочерними элементами своих родителей.
Похожие вопросы