Cách hoạt động của bộ chọn CSS con thứ n. Cách hoạt động của con thứ n - Tiêu chuẩn web
Lớp giả :nth-child được sử dụng để thêm kiểu cho các phần tử dựa trên việc đánh số trong cây phần tử.
Chỉ định
| Sự miêu tả | Ví dụ | |
|---|---|---|
| <тип> | Cho biết loại giá trị. | <размер> |
| A && B | Các giá trị phải được xuất ra theo thứ tự được chỉ định. | <размер> && <цвет> |
| A | B | Cho biết rằng bạn chỉ cần chọn một giá trị trong số các giá trị được đề xuất (A hoặc B). | bình thường | vốn hóa nhỏ |
| Một || B | Mỗi giá trị có thể được sử dụng độc lập hoặc cùng với các giá trị khác theo bất kỳ thứ tự nào. | chiều rộng || đếm |
| Các giá trị nhóm | [ cắt || đi qua ] | |
| * | Lặp lại 0 hoặc nhiều lần. | [,<время>]* |
| + | Lặp lại một hoặc nhiều lần. | <число>+ |
| ? | Loại, từ hoặc nhóm được chỉ định là tùy chọn. | chèn vào? |
| (A, B) | Lặp lại ít nhất A, nhưng không quá B lần. | <радиус>{1,4} |
| # | Lặp lại một hoặc nhiều lần cách nhau bằng dấu phẩy. | <время># |
Giá trị
lẻ Tất cả các số phần tử lẻ. chẵn Tất cả các phần tử được đánh số chẵn.<число>Số seri phần tử con liên quan đến cha mẹ của bạn. Đánh số bắt đầu từ 1, đây sẽ là phần tử đầu tiên trong danh sách.<выражение>Nó được chỉ định ở dạng an±b, trong đó a và b là số nguyên và n là bộ đếm tự động nhận giá trị 0, 1, 2...
Nếu a bằng 0 thì nó không được viết và mục nhập được viết tắt là b . Nếu b bằng 0 thì nó cũng không được chỉ định và biểu thức được viết dưới dạng an . a và b có thể là số âm, trong trường hợp này dấu cộng đổi thành dấu trừ, ví dụ: 5n-1.
Bằng cách sử dụng giá trị a và b âm, một số kết quả cũng có thể âm hoặc bằng 0. Tuy nhiên, các phần tử chỉ bị ảnh hưởng bởi các giá trị dương do việc đánh số phần tử bắt đầu từ 1.
Trong bảng 1 hiển thị một số biểu thức và từ khóa có thể có, đồng thời chỉ ra số phần tử nào sẽ được sử dụng.
| Nghĩa | Số mặt hàng | Sự miêu tả |
|---|---|---|
| 1 | 1 | Phần tử đầu tiên là từ đồng nghĩa với lớp giả :first-child. |
| 5 | 5 | Yếu tố thứ năm. |
| 2n | 2, 4, 6, 8, 10,… | Tất cả phần tử chẵn, tương tự của giá trị chẵn . |
| 2n+1 | 1, 3, 5, 7, 9,… | Tất cả các phần tử lẻ, tương tự như giá trị lẻ. |
| 3n | 3, 6, 9, 12, 15,… | Mỗi yếu tố thứ ba. |
| 3n+2 | 2, 5, 8, 11, 14,… | Mọi phần tử thứ ba, bắt đầu từ phần tử thứ hai. |
| n+4 | 4, 5, 6, 7, 8,… | Tất cả các phần tử ngoại trừ ba phần tử đầu tiên. |
| -n+3 | 3, 2, 1 | Ba yếu tố đầu tiên. |
| 5n-2 | 3, 8, 13, 18, 23,… | — |
| thậm chí | 2, 4, 6, 8, 10,… | Tất cả các phần tử chẵn. |
| số lẻ | 1, 3, 5, 7, 9,… | Tất cả các yếu tố lẻ. |
Có thể kết hợp hai lớp giả :nth-child để chọn một loạt phần tử. Tất cả các phần tử từ hai đến năm sẽ được chọn ở đây.
:nth-child(n+2):nth-child(-n+5) ( … )
Ví dụ
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Dầu | 16 | 34 | 62 | 74 | 57 |
| Vàng | 4 | 69 | 72 | 56 | 47 |
| Cây | 7 | 73 | 79 | 34 | 86 |
| Đá | 23 | 34 | 88 | 53 | 103 |
TRONG trong ví dụ này Lớp giả :nth-child được sử dụng để thay đổi kiểu của hàng đầu tiên của bảng, cũng như để đánh dấu tất cả các hàng chẵn bằng màu sắc (Hình 1).
Cơm. 1. Áp dụng pseudo-class:nth-child cho các hàng của bảng
Sự chỉ rõ
Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.
- Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
- Đề xuất ứng viên ( Khuyến nghị có thể ) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
- Khuyến nghị đề xuất Khuyến nghị được đề xuất) - ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
- Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
- Bản thảo của người biên tập ( bản thảo biên tập) - phiên bản dự thảo của tiêu chuẩn sau khi các biên tập viên dự án thực hiện các thay đổi.
- Bản nháp ( Thông số kỹ thuật dự thảo) - phiên bản dự thảo đầu tiên của tiêu chuẩn.
Có một bộ chọn như vậy, hay đúng hơn là một lớp giả, được gọi là:nth-child . Đây là một ví dụ về việc sử dụng nó:
UL LI:nth-child(3n+3) ( color:#CCC; )
Đoạn mã CSS ở trên có tác dụng gì? Nó chọn mọi phần tử thứ ba bên trong danh sách có dấu đầu dòng: đây là ngày thứ 3, thứ 6, thứ 9, thứ 12, v.v. Hãy xem chính xác biểu thức này hoạt động như thế nào và bạn có thể làm gì khác với :nth-child .
Tất cả phụ thuộc vào những gì nằm giữa dấu ngoặc. Selector:nth-child chấp nhận hai từ khóa: chẵn và lẻ. Ở đây mọi thứ đều đơn giản: chẵn chọn các phần tử chẵn, chẳng hạn như thứ 2, thứ 4, thứ 6, v.v., và lẻ chọn các phần tử lẻ, chẳng hạn như thứ 1, thứ 3, thứ 5, v.v. d.
Như bạn có thể thấy từ ví dụ đầu tiên, :nth-child cũng lấy biểu thức làm tham số. Bao gồm những phương trình đơn giản nhất, nói cách khác, chỉ là những con số. Nếu bạn đặt chúng trong ngoặc thì chỉ một phần tử có số tương ứng sẽ được chọn. Ví dụ: đây là cách chỉ chọn phần tử thứ năm:
UL LI:nth-child(5) ( color:#CCC; )
Tuy nhiên, hãy quay lại 3n+3 từ ví dụ đầu tiên. Nó hoạt động như thế nào và tại sao mọi phần tử thứ ba đều được chọn? Bí quyết là phải hiểu biến n và giá trị đã cho phương trình đại số. Hãy coi n là tập hợp các số nguyên dựa trên số 0. Sau đó hoàn thành phương trình. Vậy 3n là 3×n, và toàn bộ phương trình cộng lại là (3×n)+3. Bây giờ, thay thế các số lớn hơn hoặc cho n bằng 0, chúng ta sẽ lấy:
- (3 × 0) + 3 = 3 = phần tử thứ 3
- (3 × 1) + 3 = 6 = phần tử thứ 6
- (3 × 2) + 3 = 9 = phần tử thứ 9, v.v.
Thế còn:nth-child(2n+1) thì sao?
- (2 × 0) + 1 = 1 = phần tử thứ 1
- (2 × 1) + 1 = 3 = phần tử thứ 3
- (2 × 2) + 1 = 5 = phần tử thứ 5, v.v.
Được rồi, dừng lại! Điều này cũng giống như kỳ quặc. Vậy thì có lẽ chúng ta không nên sử dụng biểu thức này? Nhưng chẳng phải chúng ta đang phức tạp hóa quá mức ví dụ đầu tiên của mình sao? Điều gì sẽ xảy ra nếu thay vì 3n+3 chúng ta viết 3n+0 hoặc thậm chí đơn giản hơn là 3n?
- (3 × 0) = 0 = không có gì
- (3 × 1) = 3 = phần tử thứ 3
- (3 × 2) = 6 = phần tử thứ 6
- (3 × 3) = 9 = phần tử thứ 9, v.v.
Vì vậy, như bạn có thể thấy, kết quả sẽ giống nhau, có nghĩa là không cần +3. Chúng ta có thể sử dụng các giá trị âm của n cũng như phép trừ trong các phương trình. Ví dụ: 4n-1:
- (4 × 0) – 1 = –1 = không có gì
- (4 × 1) – 1 = 3 = phần tử thứ 3
- (4 × 2) – 1 = 7 = phần tử thứ 7, v.v.
Việc sử dụng -n có vẻ lạ lùng - xét cho cùng, nếu kết quả cuối cùngâm thì sẽ không có phần tử nào được đưa vào vùng chọn. Nhưng nếu bạn thêm vào phương trình và làm cho kết quả dương trở lại, thì mẫu sẽ trở nên khá thú vị: sử dụng nó, bạn có thể nhận được n phần tử đầu tiên, ví dụ như thế này: -n+3:
- –0 + 3 = 3 = phần tử thứ 3
- –1 + 3 = 2 = phần tử thứ 2
- –2 + 3 = 1 = phần tử thứ nhất
- –3 + 3 = 0 = không có gì, v.v.
SitePoint có một tài liệu tham khảo hay với một dấu hiệu hay mà tôi sẽ đăng một cách trơ trẽn ở đây:
| N | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
Hỗ trợ trình duyệt
Bộ chọn:nth-child là một trong số ít bộ chọn CSS được hỗ trợ gần như đầy đủ trong trình duyệt hiện đại và hoàn toàn không được hỗ trợ trong IE, ngay cả trong IE8. Vì vậy, khi sử dụng nó và kết quả cuối cùng được tạo ra bằng công nghệ nâng cao lũy tiến, bạn có thể sử dụng nó một cách an toàn cho một số thành phần thiết kế, chẳng hạn như tô màu các hàng trong bảng. Tuy nhiên, nó không nên được sử dụng trong những trường hợp nghiêm trọng hơn. Ví dụ: dựa vào nó trong bố cục trang web hoặc loại bỏ lề phải khỏi mỗi khối thứ ba trong lưới ba nhân ba để làm cho chúng vừa với một hàng.
Giả sử chúng ta có HTML này:
<p> Nhỏ bé</p>
<p> Heo con</p>
</phần>
CSS sau đây sẽ làm điều tương tự:
p:nth- child(2) ( color : red ; )
p:nth-of-type(2) ( color : red ; )
Tất nhiên, mặc dù có sự khác biệt trong các bộ chọn này.
Lớp giả :con thứ n, có nghĩa là chọn một phần tử, Nếu như:
- Phần tử này là một đoạn văn;
- Đây là yếu tố thứ hai của một phụ huynh.
- Chọn đoạn thứ hai của một phụ huynh.
<h1 > Từ</h1>
<p> Nhỏ bé</p>
<p> Heo con</p>
</phần>
Bây giờ tùy chọn đầu tiên không hoạt động:
p:nth- child(2) ( color : red ; ) /* Không hoạt động */
Cái thứ hai tiếp tục hoạt động:
p:nth-of-type(2) ( color : red ; ) /* Vẫn đang làm việc */
Khi nói "Không hoạt động", ý tôi là bộ chọn :nth-child chọn từ "Little" thay vì "Piggy". Bởi vì phần tử đáp ứng cả hai điều kiện: 1) Đây là phần tử thứ hai của phần tử cha và 2) Đây là một đoạn văn. Khi nói "Tiếp tục hoạt động", ý tôi là bộ chọn tiếp tục được "Piggy" chọn vì đây là đoạn thứ hai của phần tử gốc.
Nếu bạn thêm
sau đó , thì bộ chọn là c:nth-child sẽ không chọn bất cứ điều gì vì đoạn văn không còn là thành phần thứ hai nữa. Bộ chọn với:nth-of-type sẽ tiếp tục hoạt động.
Tôi thấy :nth-of-type nhìn chung ít giòn hơn và hữu ích hơn, mặc dù điều này :nth-child vẫn tiếp tục là một yếu tố chính trong công việc. Bạn có thường xuyên nghĩ “Tôi muốn chọn phần tử thứ hai trong khối cha mẹ, nếu đó là một đoạn văn." Có thể đôi khi, nhưng bạn thường nghĩ "Chọn đoạn thứ hai" hoặc "chọn mọi hàng thứ ba của bảng", vì những tác vụ này :nth-of-type sẽ phù hợp hơn (một lần nữa, theo ý kiến của tôi).
Hầu hết các tình huống mà tôi nói "Tại sao bộ chọn của tôi với:nth-child không hoạt động?" xảy ra vì tôi quên chọn thẻ và thẻ bắt buộc hóa ra không phải là thứ cần thiết. Do đó, khi sử dụng:nth-child, tốt hơn là chỉ định nó từ cấp độ gốc và không sử dụng thẻ neo.
dl :nth- con(2) ( ) /* Tùy chọn này tốt hơn */
dd:nth- child(2 ) ( ) /* cái này */
Nhưng, tất nhiên, tất cả phụ thuộc vào tình hình cụ thể.
Hỗ trợ trình duyệt: loại thứ n khá tốt... Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Tôi sẽ nói nếu bạn cần hỗ trợ sâu hơn thì hãy sử dụng jQuery (sử dụng bộ chọn và áp dụng một lớp khi cần), nhưng jQuery đã ngừng hỗ trợ:nth-of-type . Tôi nghe nói điều đó do hiếm khi sử dụng, nhưng nó có vẻ lạ đối với tôi. Nếu bạn muốn đi theo con đường này thì đây.
