Có sự khác biệt về chức năng nào giữa CSS 2.1 :after
và ::after
bộ chọn giả CSS 3 (ngoài việc ::after
khô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ó sự khác biệt về chức năng nào giữa CSS 2.1 :after
và ::after
bộ chọn giả CSS 3 (ngoài việc ::after
khô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:
Đó 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
và ::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-child
hoặ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
và :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-line
hoặ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 /
:after
và ::after
hoá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.
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).