tôi đúng loại thứ n
Một chút bối rối về các lớp giả và cách nó hoạt động - đặc biệt là với con thứ n
So với lớp.
Có thể ý tưởng của tôi sai, nhưng xem xét cấu trúc này
.. phần tử con thứ ba (phần tử đầu tiên có thẻ lớp) sẽ (có thể?) hoạt động
chọn
.row .label:nth-of-type(1) {
/*một số quy tắc*/
}
Tuy nhiên, ít nhất ở đây trong chrome, nó không chọn nó. Nó chỉ hoạt động nếu nó là con đầu tiên trong hàng, giống như con thứ n
Giống nhau - Vì vậy, điều này giống như loại thứ n
Sự khác biệt là gì? ?
con thứ n
Lớp giả đề cập đến "phần tử con phù hợp thứ N", nghĩa là nếu bạn có cấu trúc sau:
Sau đó p:nth-con(2)
sẽ chọn nút con thứ hai cũng là p (nghĩa là nút có "Đoạn" P
).
p:loại thứ n
sẽ chọn thứ haikhớpP
yếu tố, (tức là mục tiêu của chúng tôiP
).
Đây là một bài viết hay về chủ đề này của Chris Coyier @ CSS-Tricks.com
Lý do bạn nghỉ giải lao là vì loại đề cập đến loại phần tử (tức là div
), nhưng div đầu tiên không khớp với quy tắc bạn đã đề cập (.row .label
), do đó quy tắc này không được áp dụng.
Lý do là, CSS được phân tích từ phải sang trái , có nghĩa là trình duyệt đầu tiên nhìn vào :loại thứ n(1)
, xác định loại tìm kiếm của nó là div
phần tử của , cũng là phần tử đầu tiên thuộc loại này, với .hàng ngang
các phần tử khớp nhau, phần tử đầu tiên là .biểu tượng
yếu tố. Sau đó, nó đọc rằng phần tử nên có .nhãn
class, không phù hợp với bất kỳ điều nào ở trên.
Nếu bạn muốn chọn thành phần nhãn đầu tiên, bạn cần phải bọc tất cả các nhãn trong vùng chứa riêng của chúng hoặc chỉ cần sử dụng loại thứ n(3)
(Giả sử sẽ luôn có 2 biểu tượng).
Một lựa chọn khác, (thật đáng buồn) là sử dụng...đợi nó...jQuery:
$(hàm () {
$('.row .label:first')
.css({
Màu nền: "xanh"
});
});
Tôi là một lập trình viên xuất sắc, rất giỏi!