Thủ thuật css con cuối cùng thứ n

Chúng tôi có con đầu lòng, con cuối cùng và con thứ n. Nếu bạn là con một thì sao?. Không phải ai cũng có anh chị em, bạn biết đấy. Đừng lo, CSS đã hỗ trợ bạn 🤗. Nếu bạn muốn tạo kiểu cho một phần tử không có anh chị em, hãy sử dụng. bộ chọn lớp giả con một 👩‍👧

HTML

<ul>
  <li>I'm the only child👩‍👧</li>
</ul>

<ul>
  <li>I have siblings👩‍👧‍👧</li>
  <li>I have siblings👩‍👧‍👧</li>
</ul>

CSS

li:only-child {
  color: DeepPink;
}

đầu ra

Tôi là con một 👩‍👧

Tôi có anh chị em 👩‍👧‍👧

Tôi có anh chị em 👩‍👧‍👧

• Các giải pháp thay thế
  • sử dụng. con đầu lòng và. con cuối cùng
  • sử dụng. đứa con thứ n và. nth-con-cuoi
  • Có gì khác biệt?
  • Trận chiến cụ thể ⚔️
• con một so với con một
  • Ví dụ. con một
  • Ví dụ. KHÔNG phải con một
  • Ví dụ. duy nhất của loại
• Lớp giả CSS tương tự khác
• Hỗ trợ trình duyệt
• Cập nhật. con một trong Bộ chọn CSS 4
• Đầu vào của cộng đồng
  • con đầu lòng so với con một
• Tài nguyên

# Các giải pháp thay thế

Ngoài ra, bạn cũng có thể đạt được "con duy nhất" này bằng cách sử dụng các bộ chọn con khác

# Sử dụng. con đầu lòng và. con cuối cùng

Điều này cũng sẽ chọn đứa trẻ duy nhất

li:first-child:last-child {
  color: DeepPink;
}

# Sử dụng. đứa con thứ n và. nth-con-cuoi

li:nth-child(1):nth-last-child(1) {
  color: DeepPink;
}

# Có gì khác biệt?

Vì vậy, sự khác biệt giữa việc sử dụng giải pháp thay thế và

li:only-child {
  color: DeepPink;
}

Nếu có hai hoặc nhiều quy tắc CSS xung đột trỏ đến cùng một phần tử, trình duyệt sẽ tuân theo một số quy tắc để xác định quy tắc nào cụ thể nhất và do đó sẽ thắng

w3schools. com. Tính đặc hiệu của CSS

# Trận chiến cụ thể ⚔️

Hãy xem ví dụ này. Vì

li:only-child {
  color: DeepPink;
}

li:first-child:last-child {
  color: blue; /* 👈 This will win */
}

li:only-child {
  color: DeepPink;
}

Và nếu chúng ta chiến đấu với cả 3 người họ.

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

# con một vs con một

Hãy bắt đầu bằng cách giải thích chúng riêng lẻ

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

Bây giờ chúng ta đã có lời giải thích. Hãy xem xét một số ví dụ

# Ví dụ. con một

Đây là một cách dễ dàng.

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

# Ví dụ. KHÔNG phải con một

Nhưng bây giờ chúng ta có một vấn đề. Cha mẹ,

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

# Ví dụ. duy nhất của loại

Tuy nhiên, nếu chúng tôi sử dụng

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

li:only-child {
  color: DeepPink;
}

li:first-child:last-child {
  color: DeepPink;
}

# Lớp giả CSS tương tự khác

Dưới đây là một số lớp giả CSS tương tự khác

• li:first-child:last-child {
    color: DeepPink;
  }
  

  5 và

  li:first-child:last-child {
    color: DeepPink;
  }
  

  6

• li:first-child:last-child {
    color: DeepPink;
  }
  

  7 và

  li:first-child:last-child {
    color: DeepPink;
  }
  

  8

• li:only-child {
    color: DeepPink;
  }
  

  0 và

  li:nth-child(1):nth-last-child(1) {
    color: DeepPink;
  }
  

  0

Tôi đã đề cập đến

li:first-child:last-child {
  color: DeepPink;
}

li:first-child:last-child {
  color: DeepPink;
}

CSS không phải bộ chọn

# Hỗ trợ trình duyệt

Nó cũng được hỗ trợ khá tốt, bao gồm cả Internet Explorer

Hỗ trợ trình duyệt. con một

# Cập nhật. con một trong Bộ chọn CSS 4

Cũng muốn bao gồm bản cập nhật này. Nó nằm trong Bản nháp làm việc của Bộ chọn CSS cấp 4

Các phần tử phù hợp không bắt buộc phải có cha

Tài liệu web MDN

Vậy có nghĩa là con một có thể tồn tại mà không có phần tử cha 🤔 Tôi thực sự không biết chi tiết về điều này 😅. Nhưng nếu bạn biết điều này là gì, hãy để lại trong phần bình luận để tôi có thể tìm hiểu thêm. Bạn biết những gì họ nói, chia sẻ là quan tâm 🤗

# Đầu vào của cộng đồng

• @EmmiePaivarinta.

  li:nth-child(1):nth-last-child(1) {
    color: DeepPink;
  }
  

  3 cũng siêu hữu ích 😊 Nó chỉ áp dụng nếu phần tử không có phần tử con

• @Skateside. Cảnh báo công bằng với

  li:nth-child(1):nth-last-child(1) {
    color: DeepPink;
  }
  

  3

np

li:nth-child(1):nth-last-child(1) {
  color: DeepPink;
}

# con đầu vs con một

@yoann_buzenet. Tại sao chúng ta sẽ sử dụng

li:only-child {
  color: DeepPink;
}

li:nth-child(1):nth-last-child(1) {
  color: DeepPink;
}

@cancrexo. chà, không phải lúc nào

li:nth-child(1):nth-last-child(1) {
  color: DeepPink;
}

@yoann_buzenet. Có nhưng nếu chỉ có một con, thì

li:nth-child(1):nth-last-child(1) {
  color: DeepPink;
}

Làm cách nào để tạo kiểu con cuối cùng trong CSS?

Làm cách nào bạn có thể chọn phần tử cuối cùng bằng CSS?