cuốn sách gpt4 ai đã làm

css - loại thứ n và con thứ n

In lại Tác giả: Walker 123 更新时间:2023-11-28 02:06:01 29 4
mua khóa gpt4 Nike

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


A

B

1

2

3


.. 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ì? ?

câu trả lời hay nhất

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:


Xin chào



Đoạn



Mục tiêu



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"
});
});

Về css - nth-of-type và nth-child, chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/49012186/

29 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress