Nth-of-type vs nth-child
Я немного смущен о псевдо-классе nth-of-type и о том, как это должно работать, особенно в сравнении с классом nth-child.
Возможно, у меня неправильная идея, но с учетом этой структуры
<div class="row">
<div class="icon">A</div>
<div class="icon">B</div>
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
</div>
. Третий дочерний элемент (сначала с меткой класса) должен (возможно?) выбираться с помощью
.row .label:nth-of-type(1) {
/* some rules */
}
Однако, по крайней мере, в хром здесь он не выбирает его. Он работает только в том случае, если он является первым дочерним элементом в строке, который является таким же, как nth-child, поэтому какая разница между этим и nth-of-type?
Ответы
Ответ 1
Псевдокласс nth-child ссылается на "N-ый согласованный дочерний элемент", то есть если у вас есть структура следующим образом:
<div>
<h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>
</div>
Затем p:nth-child(2) выберет второй ребенок, который также является p (а именно, p с "Параграф" ).
p:nth-of-type выберет второй сопоставленный элемент p, а именно, наш Target p).
Вот отличная статья на эту тему Chris Coyier @CSS-Tricks.com
Причина ваших разрывов заключается в том, что тип относится к типу элемента (а именно, div), но первый div не соответствует указанным вами правилам (.row .label), поэтому правило не применяется.
Причина в том, что CSS анализируется справа налево, что означает, что браузер сначала смотрит на :nth-of-type(1), определяет, что он ищет элемент типа div, который также является первым его типом, который соответствует элементу .row и первому элементу .icon. Затем он читает, что элемент должен иметь класс .label, который ничего не соответствует приведенному выше.
Если вы хотите выбрать первый элемент метки, вам нужно будет либо обернуть все ярлыки в свой собственный контейнер, либо просто использовать nth-of-type(3) (при условии, что всегда будет два значка).
Другой вариант, было бы (к сожалению) использовать... ждать его... jQuery:
$(function () {
$('.row .label:first')
.css({
backgroundColor:"blue"
});
});
Ответ 2
.label:nth-of-type(1)
"type" здесь относится к типу элемента. В этом случае div, а не классу. Это не означает первый элемент, который является .label, а означает первый элемент его типа, который также имеет класс label.
Нет элементов с классом label, которые имеют индекс 1 своего типа.
Ответ 3
![enter image description here]()
в изображении из добавленных 10 элементов, 8 - <p> и 2 - <i>, два закрашенных элемента детали указывают <i>, остальные восемь: <p>
css для страницы идет здесь:
<style>
* {
padding: 0;
margin:0;
}
section p {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section i {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
</style>
</head>
<body>
<section>
<p></p>
<p></p>
<p></p>
<p></p>
<i></i>
<p></p>
<i></i>
<p></p>
<p></p>
<p></p>
</section>
</body>
первая зеленая лампочка указывает
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
а вторая красная лампочка в коде не работает, потому что я не является первым элементом в потоке
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
и синяя лампочка на рисунке указывает первый тип я в потоке
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
Ответ 4
:nth-of-type используется для выбора одного и того же типа .
По типу я подразумевается тип тега, как в <li>, <img>, <div> и т.д.
:nth-child используется для выбора дочерних элементов определенного родительского тега независимо от типа
Пример :nth-of-type
HMTL:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
CSS
Обратите внимание, что между тегом <li> и псевдоклассом nth-of-type нет пробела.
li:nth-of-type(odd) { background-color: #ccc; }
Результат:
https://jsfiddle.net/79t7y24x/
Пример :nth-child
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
CSS
Обратите внимание, что существует пробел между тегом <ul> и псевдо-классом :nth-child
ul :nth-child(even) { background-color: red }
Результат: https://jsfiddle.net/o3v63uo7/
Ответ 5
Вот простой пример, который показывает разницу между nth-child vs nth-of-type.
Рассмотрим следующий html
<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>
Использование nth-of-child
p:nth-of-child(2){
background:red;
}
Красный фон будет применен к второму p-элементу внутри div.
Это происходит потому, что nth-of-child базовым образом означает найти n-й тег p (в данном случае 2-й тег p) внутри контейнера
Использование nth-child
p:nth-child(2){
background:red;
}
Здесь не применяется css.
Это происходит потому, что nth-child в основном означает найти n-й тег внутри контейнера (в этом случае 2-й тег - div) и проверить, является ли это тег p
Ответ 6
Вот пример:
<div>
<div >0</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
</div>
этот селектор: div div:nth-child(1) выберет первый дочерний элемент div, но с другим условием, что дочерний элемент должен быть div.
здесь первый ребенок - это <div>0</div>, но если первый ребенок был абзацем p: <p>0</p>, этот селектор не будет влиять на страницу, потому что нет первого ребенка div, первый ребенок - p.
но этот селектор: div div:nth-of-type(1), если первый ребенок был <div>0</div>, это повлияет на него, но если первый ребенок <p>0</p> теперь, он будет воздействовать на второго ребенка <div>1</div>, потому что он первый ребенок его типа div.
