Sự khác biệt giữa: con đầu tiên và: kiểu đầu tiên là gì?

Question

tôi không thể biết sự khác biệt giữa element:first-child và element:first-of-type

Ví dụ nói, bạn đã có một div

div:first-child
→ Tất cả <div> yếu tố đó là đứa con đầu lòng của cha mẹ họ.

div:first-of-type
→ Tất cả <div> yếu tố đó là <div> tử đầu tiên của cha mẹ họ.

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

Có thể ai đó vui lòng giải thích?

Answer 1

Một yếu tố phụ huynh 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 trong số họ có thể là người đầu tiên. Đây là lần xuất hiện 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-child và :first-of-type là :first-of-type sẽ phù hợp với các yếu tố đầu tiên của loại nguyên tố của nó, mà trong HTML được đại diện bởi tên thẻ của nó, ngay cả khi yếu tố đó không phải là con đầu tiên của cha mẹ. Cho đến nay các phần tử con mà chúng ta đang xem có tất cả là div s, nhưng hãy chịu đựng với tôi, tôi sẽ hiểu điều đó một chút.

Hiện tại, cuộc trò chuyện cũng đúng: bất kỳ :first-child cũng là :first-of-type bởi sự cần thiết. Kể từ khi đứa con đầu lòng ở đây cũng là div đầu tiên, nó sẽ phù hợp cả pseudo-lớp học, cũng như các loại selector 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 kiểu của đứa con đầu lòng từ div để một cái gì đó khác, như h1, nó vẫn sẽ là đứa trẻ đầu tiên, nhưng nó sẽ không còn là div đầu tiên rõ ràng; thay vào đó, nó sẽ trở thành (và duy nhất) đầu tiên (và duy nhất) h1. Nếu có bất kỳ phần tử nào khác của div sau đứa con đầu tiên này trong cùng một cha mẹ, thì phần tử đầu tiên trong số đó sẽ là . Trong ví dụ được đưa ra, đứa con thứ hai trở thành người đầu tiên div sau khi đứa con đầu lòng được thay đổi thành một 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-child tương đương với :nth-child(1). Điều này cũng ngụ ý rằng trong khi bất kỳ phần tử nào chỉ có thể có một phần tử con duy nhất phù hợp với :first-child tại một thời điểm, nó có thể và sẽ có nhiều trẻ em khớp với số :first-of-type giả như số loại trẻ em có.Trong ví dụ của chúng tôi, chọn .parent > :first-of-type (với một tiềm ẩn * đủ điều kiện các :first-of-type giả) sẽ phù hợp hai yếu tố, không chỉ là 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 này cũng đúng cho :last-child và :last-of-type: bất kỳ :last-child là bởi sự cần thiết cũng :last-of-type, vì hoàn toàn không có yếu tố nào khác đi theo nó trong cha mẹ của nó. Tuy nhiên, bởi vì div cuối cùng cũng là đứa trẻ cuối cùng, các h1 không thể là đứa trẻ cuối cùng, mặc dù là người cuối cùng của loại hình này.

Answer 2

Tôi đã tạo ví dụ để chứng minh sự khác biệt giữa first-child và first-of-type tại đâ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 các ví dụ hoàn chỉnh, vui lòng truy cập https://jsfiddle.net/bwLvyf3k/1/