Что такое печатать на машинописи

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

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

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

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

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

[f 1]

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

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

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

blockquote>

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

Поскольку в настоящее время нет чистого решения CSS, вам придется использовать скрипт для фильтрации элементов и соответственно применять стили или дополнительные имена классов. Например, следующее обходное решение, использующее 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() работают независимо друг от друга. Это одна из проблем с функциональными псевдоклассами, которые принимают селекторы, банку червей, которую я предпочитаю не открывать посреди этого ответа. Вместо этого я собираюсь перейти к предположению что большинство сайтов не будут иметь каких-либо других элементов, кроме элементов tr, как братьев и сестер друг друга в теле таблицы, что сделает любой вариант функционально эквивалентным.)

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

---

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

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