: sau so với :: sau


133

Có sự khác biệt về chức năng nào giữa CSS 2.1 :after::afterbộ chọn giả CSS 3 (ngoài việc ::afterkhông được hỗ trợ trong các trình duyệt cũ hơn) không? Có bất kỳ lý do thực tế để sử dụng các đặc điểm kỹ thuật mới hơn?

Câu trả lời:


132

Đó là giả phân loại so với phân biệt yếu tố giả .

Ngoại trừ ::first-line, ::first-letter, ::before::after(mà đã được khoảng một thời gian ngắn và có thể được sử dụng với dấu hai chấm duy nhất nếu bạn cần hỗ trợ IE8), pseudo- yếu tố cần dấu hai chấm đôi.

Các lớp giả tự chọn các phần tử thực tế, bạn có thể sử dụng :first-childhoặc :nth-of-type(n)để chọn các phần tử đầu tiên hoặc cụ thể <p>trong một div, ví dụ.
(Và cả trạng thái của các yếu tố thực tế như :hover:focus.)

Các phần tử giả nhắm vào một phần phụ của một phần tử như ::first-linehoặc ::first-letter, những thứ không thuộc về phần tử của chúng.


Trên thực tế, mô tả tốt hơn ở đây: http://bricss.net/post/10768584657/ledge-your-lingo-pseudo- class-vs-pseudo-element
Cũng tại đây: http://www.evotech.net/blog/2007/ 05 / after-v-after-what-is-double-tràng-ký hiệu /


6
Chính vì sự khác biệt này mà "giả bộ chọn" (từ câu hỏi) là một thuật ngữ vô nghĩa. Đừng sử dụng nó, bao giờ.
BoltClock

1
trừ khi bạn đang nói về cả hai. hoặc nói chung chung.
albert

1
Đây là một lời giải thích tuyệt vời của lý thuyết, nhưng nó có liên quan đến vấn đề thực tế không? Có thực sự có lợi ích gì khi sử dụng đặc tả css3 là css2 sẽ hoàn thành công việc tương tự - trong nhiều trình duyệt hơn không?
DRosenfeld

1
@Dominic cảm ơn - Tôi đánh giá cao địa chỉ bình luận của bạn. Không có câu hỏi rằng vấn đề hỗ trợ cho (ít nhất là điều này) thẻ CSS3 gần như không phải là vấn đề.
DRosenfeld

1
@ BorisD.Teoharov Cụ thể, bạn có thể sử dụng :after::afterhoán đổi cho nhau với hành vi giống hệt nhau ngoại trừ IE8, như ghi chú câu hỏi, yêu cầu dấu hai chấm đơn.
Đa Minh

13

Bộ chọn CSS như ::after một số phần tử ảo không có sẵn như là một phần tử rõ ràng trong cây DOM. Chúng được gọi là " Các phần tử giả " và được sử dụng để chèn một số nội dung trước / sau một phần tử (ví dụ : ::before, ::after) hoặc, chọn một phần của một phần tử (ví dụ ::first-letter:). Hiện tại chỉ có 5 yếu tố giả tiêu chuẩn : after, before, first-letter, first-line, selection.

Mặt khác, có nhiều loại khác của selectors gọi là " Pseudo-Lớp học " được sử dụng để xác định một trạng thái đặc biệt của một phần tử (giống như :hover, :focus, :nth-child(n)). Chúng sẽ chọn toàn bộ phần tử hiện có trong DOM. Các lớp giả là một danh sách dài với hơn 30 mục.

Ban đầu (trong CSS2 và CSS1), cú pháp dấu hai chấm đơn được sử dụng cho cả các lớp giả và các phần tử giả. Nhưng, trong CSS3, ::cú pháp đã thay thế :ký hiệu cho các phần tử giả để phân biệt rõ hơn về chúng.

Để tương thích ngược, cú pháp dấu hai chấm cũ có thể chấp nhận được đối với các phần tử giả như :after(các trình duyệt vẫn hỗ trợ cú pháp cũ với một dấu chấm phẩy). Chỉ IE-8 không hỗ trợ cú pháp mới (sử dụng dấu hai chấm đơn nếu bạn muốn hỗ trợ IE8).

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.