So sánh CSS Pseudo-Classes: nth-child vs nth-of-type
CSS có một số lớp giả để giúp bạn tạo kiểu ứng dụng một cách dễ dàng. Có nhiều tùy chọn có thể là tuyệt vời, nhưng cũng có thể gây bối rối khi không biết nên sử dụng lớp giả nào và nó thực sự làm gì. Ở đây ta sẽ xem xét các lớp giả thứ n-con và thứ n-loại-loại của CSS để hiểu rõ hơn về thời điểm sử dụng mỗi loại và sự khác biệt thực sự là gì.
Các nth-child và nth-of-type CSS pseudo-classes được thú vị so với các loại khác của pseudo-classes vì họ chọn các yếu tố dựa trên vị trí của họ trong DOM. Trong khi một số lớp giả chọn một trạng thái cụ thể của một phần tử (ví dụ: di chuột, hoạt động , các lớp giả đích ), nth-child và nth-of-type quan tâm nhiều hơn đến cấu trúc đánh dấu của bạn.
Cài đặt HTML của ta
Để hiểu sự khác biệt giữa nth-child và nth-of-type , trước tiên ta hãy xây dựng HTML của bạn để biết ta sẽ tạo kiểu gì.
Giả sử ta có một phần trên trang web của bạn có sự kết hợp của các phần tử tiêu đề ( <h1> , <h3> ) và đoạn văn ( <p> ).
<article> <h1>Here's a Header</h1> <p>I'm a paragraph with all kinds of information.</p> <p>Let's add another paragraph for fun.</p> <p>yadda yadda yadda</p> <p>blah blah blah</p> <p>yadda yadda yadda</p> <h3>Here's a Subheader</h3> <p>blah blah blah</p> <p>And maybe just one more.</p> </article> Đánh dấu này sẽ giống như sau:
Tổng cộng, ta có một phần tử <article> là cha và chín phần tử con: một <h1> , một <h3> và bảy <p> .
Cú pháp nth-child và n-of-type
Có một số tùy chọn cho những giá trị nào bạn có thể truyền vào các lớp giả nth-child và nth-of-type -loại. Lưu ý: nth-child được sử dụng ở đây nhưng nó cũng có thể được thay thế bằng nth-of-type .
- : nth-child (2n + 3) : Tùy chọn này yêu cầu một số phép toán. Các con số là tùy thuộc vào bạn; đó là
nsẽ khác nhau. Thao tác này sẽ lấy các phần tử đã chọn của bạn, đặtnthành 0 để bắt đầu và tăng dần từ đó. Vì vậy, tương tự như vòng lặpfortrong JavaScript, nó sẽ lặp qua các phần tử đã chọn của bạn bằng cách cập nhật giá trịn:2(0)+3 = 3,2(1)+3 = 5,2(2)+3 = 7, và như thế. Kết quả của việc này sẽ là chọn các phần tử thứ ba, thứ năm, thứ bảy, v.v. - : nth-child (lẻ / chẵn) : Có thể truyền các chuỗi
oddhoặcevenđể chọn các phần tử chẵn và lẻ có sẵn. - : nth-child (3n) : Bạn cũng có thể chuyển một số với biến
n, biến này sẽ chọn khoảng thời gian xuất hiện của phần tử đã chọn. Nếu3được thông qua, nó sẽ chọn các phần tử thứ ba, thứ sáu, thứ chín, v.v. - : nth-child (3) : Nếu bạn chỉ chuyển một số (không có
n), nó sẽ chọn phần tử đó cụ thể từ DOM. Vượt qua3sẽ chỉ chọn phần tử phù hợp thứ ba.
Sử dụng Pseudo-Class thứ n-con của CSS
Lớp giả nth-child có hai thành phần quan trọng cần xem xét:
- (các) phần tử được chọn sẽ có lớp giả được áp dụng cho nó / chúng
- giá trị được truyền cho lớp giả.
Nếu ta đi tới biểu định kiểu CSS cho ví dụ HTML ở trên, ta có thể chọn các phần tử đoạn văn của bạn và tạo màu phông chữ màu maroon như sau:
article p { color: maroon; } 
Tuy nhiên, giả sử ta muốn mọi phần tử khác của đoạn văn có màu vàng. (Một lựa chọn kiểu “thú vị”… 🙈) Ta có thể áp dụng lớp giả nth-child để chỉ áp dụng màu mới cho mọi phần tử con khác là một đoạn văn.
article p:nth-child(odd) { color: goldenrod; } 
Bây giờ các đoạn văn của ta thay thế màu sắc, nhưng bạn có nhận thấy điều gì đã xảy ra sau tiêu đề phụ không? Màu hạt dẻ được lặp lại và sau đó chuyển trở lại màu vàng. Hãy xem tại sao điều đó xảy ra.
Xác định phần tử nào được chọn với nth-child
Trong ví dụ của ta ở trên, các đoạn phù hợp với kiểu p:nth-child(odd) của ta phải đáp ứng các yêu cầu sau theo thứ tự này:
- chúng là một phần tử con kỳ lạ của phần tử mẹ
- chúng là một phần tử của đoạn văn
Việc xác định xem đứa trẻ là lẻ hay chẵn không phải là kiểu cụ thể. Điều đó nghĩa là kiểm tra chẵn / lẻ xem xét tất cả các phần tử con trong phần tử mẹ của những gì đang được chọn (các phần tử đoạn) và sau đó tìm kiếm tất cả các đoạn được coi là phần tử lẻ.
Các đoạn văn có kiểu phông chữ màu vàng được áp dụng là các phần tử con "kỳ lạ" và chúng là các phần tử đoạn ( <p> ). 👩🎤 Điều đó giải thích tại sao đoạn văn sau tiêu đề phụ kết thúc là màu hạt dẻ mặc định - nó thực sự là một con “chẵn”!
Sử dụng Pseudo-Class thứ n-of-type của CSS
Loại nth-of-type rất giống với nth-child giả nth-child . Sự khác biệt chính là nó đặc biệt xem xét loại phần tử được chọn trước khi kiểm tra bất kỳ logic nào khác.
Hãy sử dụng ví dụ của ta ở trên nhưng thay vào đó hãy áp dụng kiểu nth-of-type .
<article> <h1>Here's a Header</h1> <p>I'm a paragraph with all kinds of information.</p> <p>Let's add another paragraph for fun.</p> <p>yadda yadda yadda</p> <p>blah blah blah</p> <p>yadda yadda yadda</p> <h3>Here's a Subheader</h3> <p>blah blah blah</p> <p>And maybe just one more.</p> </article> article p { color: maroon; } article p:nth-of-type(odd) { color: goldenrod; } Màu mặc định vẫn là màu hạt dẻ nhưng bây giờ ta chỉ chọn các phần tử đoạn lẻ.
Các kiểu hiện được áp dụng nếu phần tử đáp ứng yêu cầu sau:
- phần tử là một đoạn văn có thành phần mạo từ là phần tử root
- trong số các đoạn được chọn ở trên, chỉ những đoạn lẻ được chọn
Nếu ta xem xét điều này với các chú thích, sẽ rõ ràng hơn một chút về cách chúng được chọn.
Các tiêu đề ( <h1> , <h3> ) hoàn toàn không được xem xét với kiểu nth-of-type vì ta đang chọn loại phần tử cụ thể. Ta chỉ quan tâm đến các phần tử <p> trong trường hợp này. 🔥
Việc bạn sử dụng kiểu nth-child hay nth-of-type cuối cùng sẽ phụ thuộc vào mục tiêu của bạn là tạo kiểu. (Câu trả lời cổ điển "nó phụ thuộc", phải không? 🤓)
Theo nguyên tắc chung, nếu bạn muốn chọn một khoảng của bộ chọn dù loại phần tử đó là gì, hãy sử dụng nth-child . Tuy nhiên, nếu bạn chỉ muốn chọn một loại cụ thể và áp dụng một lựa chọn khoảng thời gian từ đó, hãy sử dụng loại nth-of-type . 🥳
Hỗ trợ trình duyệt
Các nth-child và nth-of-type selectors cả hai đều có hỗ trợ trình duyệt tuyệt vời. Kiểm tra nth-child và nth-of-type trên CanIUse.com để biết thêm chi tiết. Bạn sẽ không gặp sự cố nào trừ khi bạn đang hỗ trợ IE8 trở xuống. 🙈
Các tin liên quan
Cách thiết lập dự án trang web CSS và HTML của bạn2020-10-12
Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)
2020-10-12
Cách tạo ID bằng CSS
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12
Cách hiểu và tạo quy tắc CSS
2020-10-12
Cách tạo lớp giả bằng CSS
2020-10-12
Tích hợp và sử dụng các khung CSS với Vue.js
2020-10-12
Cách áp dụng các kiểu CSS cho HTML với Cascade và Specificity
2020-09-28
Cách tạo chủ đề chế độ tối bằng các biến CSS
2020-09-23
