Какая разница между:Во-первых-ребенок и:во-первых-из-тип?

Я не могу сказать разницу между element:first-child и element:first-of-type

например, скажем, у вас был div

div:first-child
→ Все <div> элементы, которые являются первыми детьми своих родителей.

div:first-of-type
→ Все <div> элементы, которые являются первыми <div> элемент их родителей.

это кажется, то же самое, но они работают по-разному.

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

2 79
css css-selectors

2 ответа:

родительский элемент может иметь один или несколько дочерних элементов:

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

среди этих детей, только один из них может быть первым. Это соответствует :first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

разницу между :first-child и :first-of-type это :first-of-type будет соответствовать первому элементу его типа элемента, который в HTML представлен его именем тега,даже если этот элемент не является первым ребенком родителя. До сих пор дочерние элементы, на которые мы смотрим, имеют все был divs, но потерпите, я доберусь до этого немного.

на данный момент верно и обратное: любой :first-child тоже :first-of-type по необходимости. Так как первый ребенок здесь тоже первый div, оно будет соответствовать и псевдоклассы, а также селектор типов div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

теперь, если вы измените тип первого ребенка от div к чему-то еще, например h1, он по-прежнему будет первым ребенком, но он больше не будет первый div очевидно; вместо этого, он становится первым (и единственным) h1. Если есть какие-либо другие div элементы, следующие за этим первым дочерним элементом в том же родителе, первый из них div элементы будут соответствовать div:first-of-type. В данном примере, второй ребенок становится первым div после первого ребенка изменяется на h1:

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

отметим, что :first-child эквивалентно :nth-child(1).

это также означает, что в то время как любой элемент может только есть один дочерний элемент, соответствующий :first-child в то время, он может и будет иметь столько детей, соответствующие :first-of-type псевдо-класс как количество видов детей. В нашем примере селектор .parent > :first-of-type (с неявной * квалификация :first-of-type псевдо) будет соответствовать два элементы, а не только один:

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

то же самое справедливо и для :last-child и :last-of-type: все :last-child по необходимости тоже :last-of-type, так как абсолютно никакой другой элемент следует за ним внутри своего родителя. Еще бы, ведь последнее div это также последний ребенок,h1 не может быть последним ребенком, несмотря на то, что последние в своем роде.

:nth-child() и :nth-of-type() функция очень похожа в принципе при использовании с произвольным целочисленным аргументом (как в :nth-child(1) пример, упомянутый выше), но где они отличаются, это потенциальное количество элементов, сопоставляемых :nth-of-type(). Это подробно описано в в чем разница между p:nth-child(2) и p: nth-of-type(2)?

138

Я создал пример, чтобы продемонстрировать разницу между first-child и first-of-type здесь.

HTML

<div class="parent">
  <p>Child</p>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

CSS

.parent :first-child {
  color: red;
}

.parent :first-of-type {
  background: yellow;
}

.parent p:first-child {
  text-decoration: line-through;
}

// Does not work
.parent div:first-child {
  font-size: 20px;
}
// Use this instead
.parent div:first-of-type {
  text-decoration: underline;
}
// This is second child regardless of its type
.parent div:nth-child(2) {
  border: 1px black solid;
}

чтобы увидеть полный пример, пожалуйста, посетите https://jsfiddle.net/bwLvyf3k/1/

11