Вопросы Теги

как использовать CSS child-nth, когда присутствует другой тип ребенка [duplicate]

Да, вы можете перегрузить invoke. Вот пример: 

class Greeter(val greeting: String) {
    operator fun invoke(target: String) = println("$greeting $target!")
}

val hello = Greeter("Hello")
hello("world")  // Prints "Hello world!"

В дополнение к тому, что сказал @ holi-java, переопределение invoke полезно для любого класса, где есть четкое действие, необязательно взятие параметров. Это также отлично, как функция расширения классов библиотеки Java с таким методом.

Например, скажем, что у вас есть следующий класс Java 

public class ThingParser {
    public Thing parse(File file) {
        // Parse the file
    }
}

. В Kotlin вы можете определите расширение ThingParser следующим образом: 

operator fun ThingParser.invoke(file: File) = parse(file)

И используйте его так: 

val parser = ThingParser()
val file = File("path/to/file")
val thing = parser(file)  // Calls Parser.invoke extension function
73
задан BoltClock 17 February 2016 в 17:45
поделиться

4 ответа

Это очень распространенная проблема, возникающая из-за непонимания работы :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».

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

Поскольку в настоящее время нет чистого решения 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().

96
ответ дан BoltClock 22 August 2018 в 01:32
поделиться
  • 1
    "(вы заметите, что я использую неупорядоченный список здесь, просто для того, чтобы управлять домашней точкой) & quot; Я желаю, чтобы больше людей были преднамеренно об их использовании заказанных против неупорядоченных пуль. Спасибо за ваш ответ. – The Red Pea 28 August 2016 в 00:40
  • 2
    @ The Red Pea: Один из моих самых главных любимчиков HTML: «В порядке от наивысшего / самого низкого до самого низкого / самого высокого: & quot; за которым следует неупорядоченный список. Я имею в виду, серьезно? – BoltClock♦ 28 August 2016 в 07:15
  • 3
    Ваш ответ блестящий! – Lalit Pal 13 May 2018 в 08:15

Не совсем ..

цитата из docs

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

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

5
ответ дан Gabriele Petrioli 22 August 2018 в 01:32
поделиться

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

Например 

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>

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

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

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

OR 

.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 is 

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>

В приведенном выше html тип элемента .rest отличается от других .rest - это абзацы, а другие - div, поэтому в этом случае if вы используете 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-тип 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 является <p>, поэтому здесь nth-of-type обнаруживает тип .rest, а затем он накладывает css на 1-й, 2-й, 3-й, 4-й, 5-й элементы <p>.

0
ответ дан Gaurav Aggarwal 22 August 2018 в 01:32
поделиться

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

0
ответ дан the8472 22 August 2018 в 01:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: