Sự khác biệt giữa: first-child và: first-of-type là gì?

Tôi không thể phân biệt được giữa element:first-childvàelement:first-of-type

Ví dụ: bạn có một div

div:first-child
→ Tất cả <div>các phần tử là con đầu tiên của cha mẹ chúng.

div:first-of-type
→ Tất cả <div>các phần tử là <div>phần tử đầu tiên của cha chúng.

Điều này có vẻ giống như cùng một thứ, nhưng chúng hoạt động khác nhau.

Ai đó có thể vui lòng giải thích?

Phần tử mẹ có thể có một hoặc nhiều phần tử con:

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

Trong số những đứa trẻ này, chỉ có một đứa có thể là đứa đầu tiên. Điều này được kết hợp bởi :first-child:

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

Sự khác biệt giữa :first-childvà :first-of-typelà :first-of-typephần tử sẽ khớp với phần tử đầu tiên của loại phần tử của nó, phần tử này trong HTML được thể hiện bằng tên thẻ của nó, ngay cả khi phần tử đó không phải là phần tử con đầu tiên của phần tử gốc . Cho đến nay, các yếu tố con mà chúng tôi đang xem xét đều là divs, nhưng hãy chịu khó với tôi, tôi sẽ giải quyết vấn đề đó sau một chút.

Bây giờ, câu chuyện cũng đúng: bất kỳ :first-childcũng là :first-of-typedo cần thiết. Vì con đầu tiên ở đây cũng là con đầu tiên div, nó sẽ khớp với cả hai lớp giả, cũng như bộ chọn kiểu div:

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

Bây giờ, nếu bạn thay đổi loại con đầu tiên từ divmột cái gì đó khác, chẳng hạn như h1, nó sẽ vẫn là con đầu tiên, nhưng divrõ ràng nó sẽ không còn là con đầu tiên nữa ; thay vào đó, nó trở thành cái đầu tiên (và duy nhất) h1. Nếu có bất kỳ divphần tử nào khác theo sau phần tử con đầu tiên này trong cùng một phần tử gốc, phần tử đầu tiên trong số các divphần tử đó sau đó sẽ khớp div:first-of-type. Trong ví dụ đã cho, con thứ hai trở thành con đầu tiên divsau khi con đầu tiên được đổi thành 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>

Lưu ý rằng :first-childtương đương với :nth-child(1).

Điều này cũng ngụ ý rằng mặc dù bất kỳ phần tử nào có thể chỉ có một phần tử con duy nhất phù hợp :first-childtại một thời điểm, nhưng nó có thể và sẽ có số lượng phần tử con phù hợp với lớp :first-of-typegiả bằng số loại phần tử con mà nó có. Trong ví dụ của chúng tôi, bộ chọn .parent > :first-of-type(với giả định *đủ điều kiện ngầm định :first-of-type) sẽ khớp với hai phần tử, không chỉ một:

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

Điều tương tự cũng đúng đối với :last-childvà :last-of-type: any :last-childcũng cần thiết :last-of-type, vì hoàn toàn không có phần tử nào khác theo sau nó trong phần tử cha của nó. Tuy nhiên, vì con cuối cùng divcũng là con cuối cùng, nên h1không thể là con cuối cùng, mặc dù thuộc loại cuối cùng.

:nth-child()và :nth-of-type()hoạt động rất giống nhau về nguyên tắc khi được sử dụng với một đối số nguyên tùy ý (như trong :nth-child(1)ví dụ đã đề cập ở trên), nhưng chúng khác nhau ở chỗ số phần tử có thể được so khớp bởi :nth-of-type(). Điều này được đề cập chi tiết trong Sự khác biệt giữa p: nth-child (2) và p: nth-of-type (2) là gì?

Tôi đã tạo một ví dụ để chứng minh sự khác biệt giữa first-childvà first-of-typeđây.

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

Để xem ví dụ hoàn chỉnh, vui lòng truy cập https://jsfiddle.net/bwLvyf3k/1/

Bạn có thể hiểu được sự khác biệt giữa kiểu con đầu tiên và kiểu con đầu lòng. họ làm việc

Mã số 1 cho kiểu đầu tiên:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

kết quả

.p1, .p2, .p3 sẽ được tạo kiểu và màu của nó sẽ là màu đỏ. ngay cả khi chúng ta đặt .p1 sau div thứ hai nó sẽ có màu đỏ.

Mã số 2 cho con đầu lòng:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

kết quả:

nếu chúng ta đặt .p2 sau div 2 thứ hai, nó sẽ không có màu đỏ tuy nhiên trong trường hợp đầu tiên nó đã hoạt động.