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; } 0 là giải pháp sau của chúng tôi sẽ có độ đặc hiệu thấp hơn
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; } 1 có độ đặc hiệu thấp hơn nên màu văn bản xuất hiện sẽ là màu xanh lam
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; } 2 này có tính đặc hiệu giống như li:only-child { color: DeepPink; } 3, vì vậy quy tắc sẽ là cái nào đến sau cùng sẽ là người chiến thắng. Trong trường hợp của chúng tôi, vì li:only-child { color: DeepPink; } 3 xuất hiện sau, nên màu văn bản sẽ xuất hiện sẽ là màu xanh lá cây
li:only-child { color: DeepPink; } 0
# 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; } 5 chỉ chọn một phần tử là con DUY NHẤT của cha mẹ. Điều đó có nghĩa là chỉ có một yếu tố trong cha mẹ đó. Ngay cả khi đó là một loại phần tử khác, nó sẽ không được coi là con một. Một yếu tố, không có ngoại lệ
li:only-child { color: DeepPink; } 6 chỉ chọn một phần tử nếu đó là phần tử con DUY NHẤT của một loại cụ thể trong phần tử cha. Vì vậy, có anh chị em khác loại là tốt
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; } 7 là con duy nhất của phần tử mẹ li:only-child { color: DeepPink; } 8, vì vậy điều này phù hợp với tiêu chí
li:only-child { color: DeepPink; } 5
# 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; } 8, có 2 con. Vì vậy, nếu chúng tôi sử dụng li:only-child { color: DeepPink; } 5 làm công cụ chọn, sẽ không có gì được chọn
li:only-child { color: DeepPink; } 8
# 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; } 6, chúng tôi ổn. Mặc dù cha mẹ của chúng tôi, li:only-child { color: DeepPink; } 8, có 2 con. li:only-child { color: DeepPink; } 7 vẫn là đứa trẻ DUY NHẤT thuộc loại cụ thể đó. Trong trường hợp này, li:only-child { color: DeepPink; } 7 của chúng tôi là loại con duy nhất của chúng tôi. Vì vậy, nó đáp ứng các tiêu chí là loại duy nhất, do đó nó được chọn
li:first-child:last-child { color: DeepPink; } 3
# 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; } 5 và li:first-child:last-child { color: DeepPink; } 6 trong các ghi chú mã trước đây của mình, hãy cuộn xuống gần cuối để đọc nó 🤓
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; } 4
# con đầu vs con một
@yoann_buzenet. Tại sao chúng ta sẽ sử dụng li:only-child { color: DeepPink; } 1 thay vì li:nth-child(1):nth-last-child(1) { color: DeepPink; } 6?
@cancrexo. chà, không phải lúc nào li:nth-child(1):nth-last-child(1) { color: DeepPink; } 6 cũng là con một 😉
@yoann_buzenet. Có nhưng nếu chỉ có một con, thì li:nth-child(1):nth-last-child(1) { color: DeepPink; } 6 cũng được, đó là điều tôi không hiểu?