Pertanyaan Apa perbedaan antara: anak pertama dan: tipe pertama?


Saya tidak bisa membedakannya element:first-child dan element:first-of-type

Misalnya katakan, Anda memiliki div

div:first-child
→ Semua <div> elemen yang merupakan anak pertama dari orang tuanya.

div:first-of-type
→ Semua <div> elemen yang pertama <div> elemen orang tua mereka.

Ini tampak seperti hal yang persis sama, tetapi mereka bekerja secara berbeda.

Bisakah seseorang menjelaskannya?


75
2017-07-09 15:19


asal


Jawaban:


Elemen induk dapat memiliki satu atau lebih elemen turunan:

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

Di antara anak-anak ini, hanya satu yang bisa menjadi yang pertama. Ini cocok dengan :first-child:

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

Perbedaan antara :first-child dan :first-of-type Apakah itu :first-of-type akan cocok dengan elemen pertama dari jenis elemennya, yang dalam HTML diwakili oleh nama tagnya, bahkan jika elemen itu bukan anak pertama dari orang tua. Sejauh ini elemen anak yang kita lihat semuanya telah ada divs, tapi beruang dengan saya, saya akan mendapatkan itu sedikit.

Untuk saat ini, sebaliknya juga berlaku: apapun :first-child juga :first-of-type oleh kebutuhan. Karena anak pertama di sini juga yang pertama div, itu akan cocok kedua pseudo-class, serta pemilih jenis div:

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

Sekarang, jika Anda mengubah jenis anak pertama dari div untuk sesuatu yang lain, seperti h1, itu akan tetap menjadi anak pertama, tetapi tidak akan menjadi yang pertama div jelas; sebaliknya, itu menjadi yang pertama (dan hanya) h1. Jika ada yang lain div elemen yang mengikuti anak pertama ini dalam orang tua yang sama, yang pertama dari mereka div elemen kemudian akan cocok div:first-of-type. Dalam contoh yang diberikan, anak kedua menjadi yang pertama div setelah anak pertama diubah menjadi 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>

Perhatikan itu :first-child setara dengan :nth-child(1).

Ini juga menyiratkan bahwa sembarang elemen mungkin hanya memiliki pencocokan elemen anak tunggal :first-child pada suatu waktu, dapat dan akan memiliki banyak anak yang cocok dengan :first-of-type pseudo-class sebagai jumlah jenis anak-anak yang dimilikinya. Dalam contoh kami, pemilih .parent > :first-of-type (dengan implisit * kualifikasi :first-of-type pseudo) akan cocok dua elemen, bukan hanya satu:

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

Hal yang sama berlaku untuk :last-child dan :last-of-type: apa saja :last-child adalah dengan kebutuhan juga :last-of-type, karena sama sekali tidak ada elemen lain yang mengikutinya di dalam induknya. Namun, karena yang terakhir div juga anak terakhir, the h1 tidak bisa menjadi anak terakhir, meskipun yang terakhir dari jenisnya.


132
2017-07-09 15:27



Saya telah membuat contoh untuk menunjukkan perbedaan antara first-child dan first-of-type sini.

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;
}

Untuk melihat contoh lengkapnya, silakan kunjungi https://jsfiddle.net/bwLvyf3k/1/


9