Thí dụ
Cách sử dụng bộ chọn: nth-child ():
/ * Chọn phần tử thứ hai của anh chị em div */div: nth-child (2) {& nbsp; Bối cảnh: màu đỏ;}
div:nth-child(2) {
background: red;
}
/ * Chọn phần tử li thứ hai trong danh sách */ li: nth-child (2) {& nbsp; Bối cảnh: Lightgreen;}
li:nth-child(2) {
background: lightgreen;
}
/ * Chọn mọi yếu tố thứ ba trong số các nhóm anh chị em */: nth-child (3) {& nbsp; Bối cảnh: màu vàng;}
:nth-child(3) {
background: yellow;
}
Hãy tự mình thử »
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
Bộ chọn :nth-child(n) khớp với mọi yếu tố là con thứ n của cha mẹ.
n có thể là một số, một từ khóa (lẻ hoặc thậm chí) hoặc một công thức (như + b).
Mẹo: Nhìn vào bộ chọn: nth-of-type () để chọn phần tử là con thứ n, cùng loại (tên thẻ), của cha mẹ của nó. Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
CSS3 |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn bộ chọn.
: Nth-child () | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS Cú pháp
: nth-child (số) {& nbsp; & nbsp; css khai báo
css declarations;
} Demo
Nhiều ví dụ hơn
Thí dụ
ODD và thậm chí là các từ khóa có thể được sử dụng để phù hợp với các phần tử con có chỉ số là lẻ hoặc thậm chí (chỉ số của đứa trẻ đầu tiên là 1).
Ở đây, chúng tôi chỉ định hai màu nền khác nhau cho các yếu tố ODD và thậm chí P:
p: nth-child (lẻ) {& nbsp; Bối cảnh: Màu đỏ; }
background: red;
}
p: nth-child (chẵn) {& nbsp; & nbsp; nền: lightgreen; }
background: lightgreen;
}
Hãy tự mình thử »
Thí dụ
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
Bộ chọn :nth-child(n) khớp với mọi yếu tố là con thứ n của cha mẹ.
background: red;
}
Hãy tự mình thử »
Thí dụ
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
background: red;
}
Hãy tự mình thử »
CSS Pseudo Class phù hợp với các yếu tố dựa trên vị trí của chúng giữa các anh chị em cùng loại (tên thẻ).:nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name). Phân loại giả nth-of-type được chỉ định với một đối số duy nhất, đại diện cho mẫu cho các phần tử phù hợp. Xem :nth-child để biết giải thích chi tiết hơn về cú pháp của nó.Thử nó
Cú pháp
Ví dụ
Ví dụ cơ bản
HTML
<div> <div>This element isn't counted.</div> <p>1st paragraph.</p> <p class="fancy">2nd paragraph.</p> <div>This element isn't counted.</div> <p class="fancy">3rd paragraph.</p> <p>4th paragraph.</p> </div>
CSS
/* Odd paragraphs */ p:nth-of-type(2n + 1) { color: red; } /* Even paragraphs */ p:nth-of-type(2n) { color: blue; } /* First paragraph */ p:nth-of-type(1) { font-weight: bold; } /* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy. The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) */ p.fancy:nth-of-type(2n + 1) { text-decoration: underline; }
Kết quả
Lưu ý: Không có cách nào để chọn lớp thứ n bằng bộ chọn này. Bộ chọn chỉ nhìn vào loại khi tạo danh sách các trận đấu. Tuy nhiên, bạn có thể áp dụng CSS cho một phần tử dựa trên vị trí :nth-of-type và một lớp, như được hiển thị trong ví dụ trên. There is no way to select the nth-of-class using this selector. The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on :nth-of-type location and a class, as shown in the example above.
Thông số kỹ thuật
Bộ chọn cấp độ 4 # thứ hai của loại pseudo # nth-of-type-pseudo |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt