Могу ли я объединить: nth-child () или: nth-of-type () с произвольным селектором?

Есть ли способ выбрать каждый n-й дочерний элемент, который соответствует (или не соответствует) произвольному селектору ? Например, я хочу выбрать каждую строку нечетной таблицы, но внутри подмножества строк:

table.myClass tr.row:nth-child(odd) { ... } 
 
Row
Row
Row
Row

Но :nth-child() просто, кажется, подсчитывает все элементы tr независимо от того, являются ли они classом «row», поэтому я получаю один элемент «row» вместо двух, которые я ищу для. То же самое происходит с :nth-of-type() .

Может кто-нибудь объяснить, почему?

Это очень распространенная проблема, возникающая из-за неправильного понимания того, как :nth-child() и :nth-of-type() работают. К сожалению, в настоящее время нет решения на основе селектора, поскольку Селекторы не обеспечивают способ соответствия n-му ребенку, который соответствует произвольному селектору, основанному на шаблоне, таком как нечетный, четный или любой an+b где a != 1 и b != 0 . Это распространяется не только на селекторов classов, а на атрибуты селекторов, отрицаний и более сложные комбинации простых селекторов.

Псевдоclass :nth-child() подсчитывает элементы среди всех своих братьев и сестер под одним и тем же родителем. Он не учитывает только братьев и сестер, которые соответствуют остальной части селектора. Аналогично, псевдоclass :nth-of-type() считает, что сиблинг использует один и тот же тип элемента, который ссылается на имя тега в HTML, а не на остальную часть селектора.

Это также означает, что если все дочерние элементы одного и того же родителя имеют один и тот же тип элемента, например, в случае тела таблицы, единственными :nth-child() элементами которого являются элементы tr или элемент списка, единственными :nth-child() элементами которых являются li элементы :nth-child() и :nth-of-type() будет вести себя одинаково, то есть для каждого значения an+b :nth-child(an+b) и :nth-of-type(an+b) будет соответствовать одному и тому же набору элементов.

Фактически, все простые селектора в данном составном селекторе, включая псевдоclassы, такие как :nth-child() и :not() , работают независимо друг от друга, вместо того, чтобы смотреть на подмножество элементов, которые сопоставляются остальными селектора.

Это также подразумевает, что нет понятия порядка среди простых селекторов в каждом отдельном селекторе 1 , что означает, например, следующие два селектора эквивалентны:

 table.myClass tr.row:nth-child(odd) table.myClass tr:nth-child(odd).row 

В переводе на английский язык они означают:

Выберите любой элемент tr , соответствующий всем следующим независимым условиям:

  • это нечетный номер родителя;
  • он имеет class «строка»; а также
  • это потомок элемента table который имеет class «myClass».

(вы заметите, что я использую неупорядоченный список здесь, просто для того, чтобы проехать домой)

Поскольку в настоящее время нет чистого решения CSS, вам придется использовать скрипт для фильтрации элементов и соответственно применять стили или дополнительные имена classов. Например, следующее обходное решение, использующее jQuery (предполагается, что в таблице только одна группа строк, заполненная элементами tr )

 $('table.myClass').each(function() { // Note that, confusingly, jQuery's filter pseudos are 0-indexed // while CSS :nth-child() is 1-indexed $('tr.row:even').addClass('odd'); }); 

С соответствующим CSS:

 table.myClass tr.row.odd { ... } 

Если вы используете инструменты автоматического тестирования, такие как Selenium или обрабатываете HTML с помощью таких инструментов, как lxml, многие из этих инструментов позволяют XPath в качестве альтернативы:

 //table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1] 

Другие решения, использующие разные технологии, остаются в качестве упражнения для читателя; это всего лишь краткий, надуманный пример для иллюстрации.


Для этого стоит предложение о расширении нотации :nth-child() должно быть добавлено на уровень 4 выбора, для конкретной цели выбора каждого n-го дочернего элемента, соответствующего данному селектору. 2

Селектор, с помощью которого можно фильтровать совпадения, предоставляется в качестве аргумента для :nth-child() , снова из-за того, как селектора работают независимо друг от друга в последовательности, как это диктуется существующим синтаксисом селектора. Поэтому в вашем случае это будет выглядеть так:

 table.myClass tr:nth-child(odd of .row) 

(Проницательный читатель сразу заметит, что это должно быть :nth-child(odd of tr.row) вместо этого, поскольку простые селекторы tr и :nth-child() действуют независимо друг от друга. Это один из проблемы с функциональными псевдоclassами, которые принимают селекторы, банку червей, которые я предпочитаю не открывать в середине этого ответа. Вместо этого я собираюсь идти с предположением, что большинство сайтов не будут иметь никаких других элементов, кроме tr элементов как братья и сестры друг друга в теле таблицы, что сделает любой вариант функционально эквивалентным.)

Конечно, будучи совершенно новым предложением в совершенно новой спецификации, это, вероятно, не увидит реализацию до нескольких лет в будущем. В то же время вам придется придерживаться сценария, как указано выше.


1 Если вы укажете тип или универсальный селектор, он должен быть первым. Однако это не меняет того, как работают селекторы. это не более чем синтаксическая причуда.

2 Первоначально это было предложено как :nth-match() , однако, поскольку он по-прежнему считает элемент относительным только для его братьев и сестер, а не для каждого другого элемента, который соответствует данному селектору, он с тех пор, как с 2014 года был перераспределен как расширение на существующий :nth-child() .

На самом деле, нет..

цитата из документов

Псевдоclass :nth-child сопоставляет элемент, у которого есть :nth-child элементы + b-1 перед ним в дереве документов , для заданного положительного или нулевого значения для n и имеет родительский элемент.

Это собственный селектор и не сочетается с classами. В вашем правиле это просто должно удовлетворить оба селектора одновременно, поэтому он отобразит строки таблицы :nth-child(even) если они также имеют class .row .

nth-of-type работает в соответствии с индексом того же типа элемента, но nth-child работает только в соответствии с индексом независимо от того, какой тип элементов сиблинга.

Например

 
...
...
...
...
...
...
...
...
...
...

Предположим, что в выше html мы хотим скрыть все элементы, имеющие class restа.

В этом случае nth-child и nth-of-type будут работать точно так же, как и все элементы одного типа, которые являются

поэтому css должен быть

 .rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){ display:none; } 

ИЛИ

 .rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){ display:none; } 

Теперь вам должно быть интересно, в чем разница между nth-child и nth-of-type так что это разница

Предположим, что html

 
...
...
...
...
...

...

...

...

...

...

В приведенном выше html тип элемента .rest отличается от других .rest – это абзацы, а другие – div, поэтому в этом случае, если вы используете nth-child вам нужно писать так

 .rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){ display:none; } 

но если вы используете nss-type- css, это может быть

 .rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){ display:none; } 

Поскольку тип элемента .rest

поэтому здесь nth-of-type обнаруживает тип .rest а затем он накладывает css на 1-й, 2-й, 3-й, 4-й, 5-й элементы

.

Вы можете сделать это с помощью xpath. что-то вроде //tr[contains(@class, 'row') and position() mod 2 = 0] . Существуют и другие вопросы о том, как более точно сопоставлять classы.

  • Как применить несколько преобразований в CSS?
  • Что означает селектор CSS ~ (tilde / squiggle / twiddle)?
  • Двухцветный фон, разделенный диагональной линией, используя css
  • Отбрасывание SVG с помощью css3
  • Форматирование чисел (десятичные разряды, разделители тысяч и т. Д.) С помощью CSS
  • Как объединить фоновые изображения и gradleиент CSS3 с одним и тем же элементом?
  • Создание эффекта масштабирования изображения при наведении с помощью CSS?
  • Встроенный блок отображения CSS-центра?
  • Каковы различия между гибким основанием и шириной?
  • Сегменты в круге с использованием CSS3
  • Установите детей из гибкого windows на разную высоту, чтобы использовать доступное пространство
  • Давайте будем гением компьютера.