Câu hỏi Sự khác nhau giữa: con đầu tiên và: kiểu đầu tiên là gì?


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

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

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

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

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

Ai đó có thể xin giải thích?


76
2017-07-09 15:19


gốc


Đứa con đầu tiên chỉ nhắm vào đứa con đầu tiên của cha mẹ, nơi con đầu tiên nhắm vào con đầu tiên của loại đó (div hoặc một khoảng hoặc bất kỳ thứ gì bạn đang cố gắng nhắm mục tiêu) - Huangism


Các câu trả lời:


Phần tử cha 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ỉ một trong số chúng có thể là người đầu tiên. Điều này phù hợp vớ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ẽ khớp với phần tử đầu tiên của loại phần tử, trong đó HTML được thể hiện bằng tên thẻ, ngay cả khi yếu tố đó không phải là đứa con đầu tiên của cha mẹ. Cho đến nay các yếu tố con mà chúng ta đang xem divs, nhưng chịu với tôi, tôi sẽ nhận được rằng trong một chút.

Bây giờ, trò chuyện cũng đúng: bất kỳ :first-child cũng :first-of-type bởi sự cần thiết. Vì đứa trẻ đầu tiên ở đây cũng là người đầu tiên div, nó sẽ khớp cả hai các lớp giả, cũng như bộ chọn loại 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 của đứa trẻ đầu tiên 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à người đầu tiên div chắc chắn; thay vào đó, nó sẽ trở thành (và duy nhất) đầu tiên h1. Nếu có bất kỳ div các yếu tố sau đứa con đầu tiên này trong cùng một phụ huynh, phần tử đầu tiên trong số đó div các yếu tố sau đó sẽ khớp div:first-of-type. Trong ví dụ đã cho, đứa trẻ thứ hai trở thành div sau khi đứa trẻ đầu tiên được thay đổ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-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 cũng chỉ có thể có một phần tử con phù hợp :first-child tại một thời điểm, nó có thể và sẽ có nhiều trẻ em phù hợp với :first-of-type pseudo-class là số loại trẻ em có. Trong ví dụ của chúng tôi, công cụ chọn .parent > :first-of-type (với một ẩn * đủ điều kiện :first-of-type giả) sẽ khớp hai các yếu 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 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ì cuối cùng div cũng là đứa trẻ cuối cùng, 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.


133
2017-07-09 15:27



Cuối cùng tôi đã hiểu. Nếu tôi muốn div đầu tiên dưới một phần tử div tôi sẽ gọi div: first-of-type, bởi vì có thể có các phần tử không phải div trên nó. Đó là một chút khó hiểu, nhưng bây giờ tôi đã hiểu. Đây là một bài viết tuyệt vời và rất thông tin. Cảm ơn bạn và sự giúp đỡ của bạn được đánh giá cao.


Tôi đã tạo ra một ví dụ để chứng minh sự khác biệt giữa first-child và 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/


9