Các CSS 3 chọn giới thiệu là khá rõ ràng về cả hai, nhưng tôi sẽ cố gắng thể hiện sự khác biệt nào.
Lớp giả
Mô tả chính thức
Khái niệm lớp giả được giới thiệu để cho phép lựa chọn dựa trên thông tin nằm bên ngoài cây tài liệu hoặc không thể được thể hiện bằng các bộ chọn đơn giản khác.
Một lớp giả luôn bao gồm một "dấu hai chấm" ( :) theo sau là tên của lớp giả và có thể là một giá trị giữa các dấu ngoặc đơn.
Các lớp giả được cho phép trong tất cả các chuỗi các bộ chọn đơn giản có trong một bộ chọn. Các lớp giả được phép ở bất kỳ đâu trong chuỗi các bộ chọn đơn giản, sau bộ chọn loại hàng đầu hoặc bộ chọn phổ quát (có thể bị bỏ qua). Tên lớp giả không phân biệt chữ hoa chữ thường. Một số lớp giả loại trừ lẫn nhau, trong khi những lớp khác có thể được áp dụng đồng thời cho cùng một phần tử. Các lớp giả có thể là động, theo nghĩa là một phần tử có thể nhận được hoặc mất lớp giả trong khi người dùng tương tác với tài liệu.
Nguồn
Điều đó có nghĩa là gì?
Bản chất quan trọng của lớp giả được phát biểu ngay trong câu đầu tiên: "khái niệm lớp giả [...] cho phép lựa chọn " . Nó cho phép tác giả của một biểu định kiểu khác nhau giữa các phần tử dựa trên thông tin "nằm ngoài cây tài liệu" , ví dụ: trạng thái hiện tại của một liên kết ( :active, :visited). Chúng không được lưu ở bất kỳ đâu trong DOM và không tồn tại giao diện DOM để truy cập các tùy chọn này.
Mặt khác, :targetcó thể được truy cập thông qua thao tác DOM (bạn có thể sử dụng window.location.hashđể tìm đối tượng bằng JavaScript), nhưng điều này "không thể được thể hiện bằng các bộ chọn đơn giản khác" .
Vì vậy, về cơ bản một lớp giả sẽ tinh chỉnh tập hợp các phần tử được chọn như bất kỳ bộ chọn đơn giản nào khác trong một chuỗi các bộ chọn đơn giản . Lưu ý rằng tất cả các bộ chọn đơn giản trong một chuỗi các bộ chọn đơn giản sẽ được đánh giá cùng một lúc. Để có danh sách đầy đủ các lớp giả, hãy kiểm tra đề xuất bộ chọn CSS3.
Thí dụ
Ví dụ sau sẽ tô màu tất cả các hàng chẵn là màu xám ( #ccc), tất cả các hàng không đồng đều không chia hết cho 5 màu trắng và mọi hàng khác là màu đỏ tươi.
table tr:nth-child(2n) td{
background-color: #ccc;
}
table tr:nth-child(2n+1) td{
background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
background-color: #f0f;
}
Yếu tố giả
Mô tả chính thức
Các phần tử giả tạo ra những điều trừu tượng về cây tài liệu ngoài những điều được chỉ định bởi ngôn ngữ tài liệu. Ví dụ: ngôn ngữ tài liệu không cung cấp cơ chế để truy cập vào chữ cái đầu tiên hoặc dòng đầu tiên của nội dung phần tử. Yếu tố giả cho phép các tác giả tham khảo thông tin này nếu không thì không thể truy cập được. Pseudo-yếu tố cũng có thể cung cấp cho tác giả một cách để tham khảo nội dung không tồn tại trong tài liệu nguồn (ví dụ, ::beforevà ::aftergiả yếu tố cung cấp cho truy cập vào nội dung được tạo ra).
Phần tử giả được tạo bởi hai dấu hai chấm ( ::) theo sau là tên của phần tử giả.
Đây ::ký hiệu được giới thiệu bởi các tài liệu hiện tại để thiết lập một phân biệt đối xử giữa pseudo-class và pseudo-yếu tố. Để tương thích với các biểu định kiểu hiện có, tác nhân người dùng cũng phải chấp nhận ký hiệu một dấu hai chấm trước đó cho các phần tử giả được giới thiệu trong CSS cấp 1 và 2 (cụ thể là: first-line,: first-letter,: before và: after). Tính tương thích này không được phép đối với các phần tử giả mới được giới thiệu trong đặc tả này.
Chỉ một phần tử giả có thể xuất hiện trên mỗi bộ chọn và nếu có, nó phải xuất hiện sau chuỗi các bộ chọn đơn giản đại diện cho các đối tượng của bộ chọn.
Lưu ý: Phiên bản trong tương lai của đặc tả này có thể cho phép nhiều phần tử giả trên mỗi bộ chọn.
Nguồn
Điều đó có nghĩa là gì?
Phần quan trọng nhất ở đây là "phần tử giả cho phép tác giả tham chiếu đến [..] thông tin không thể truy cập được " và chúng "cũng có thể cung cấp cho tác giả một cách để tham chiếu đến nội dung không tồn tại trong tài liệu nguồn (ví dụ: ::beforevà ::afterphần tử giả cung cấp quyền truy cập vào nội dung đã tạo). ". Sự khác biệt lớn nhất là chúng thực sự tạo ra một phần tử ảo mới mà trên đó các quy tắc và thậm chí bộ chọn lớp giả có thể được áp dụng. Họ không lọc các phần tử, về cơ bản họ lọc nội dung ( ::first-line, ::first-letter) và bọc nó trong một vùng chứa ảo, tác giả có thể tạo kiểu theo cách mà anh ta muốn (tốt, gần như vậy).
Ví dụ: ::first-linephần tử giả không thể được tạo lại bằng JavaScript, vì nó phụ thuộc nhiều vào phông chữ được sử dụng hiện tại, kích thước phông chữ, chiều rộng phần tử, phần tử nổi (và có thể là thời gian trong ngày). Chà, điều đó không hoàn toàn đúng: người ta vẫn có thể tính toán tất cả các giá trị đó và trích xuất dòng đầu tiên, tuy nhiên làm như vậy là một hoạt động rất cồng kềnh.
Tôi đoán sự khác biệt lớn nhất là "chỉ có một phần tử giả có thể xuất hiện trên mỗi bộ chọn" . Ghi chú nói rằng điều này có thể thay đổi, nhưng kể từ năm 2012, tôi không tin rằng chúng ta sẽ thấy bất kỳ hành vi nào khác trong tương lai ( nó vẫn còn trong CSS4 ).
Thí dụ
Ví dụ sau sẽ thêm một thẻ ngôn ngữ vào mọi trích dẫn trên một trang nhất định bằng cách sử dụng lớp :langgiả và phần tử giả ::after:
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
TL; DR
Các lớp giả hoạt động như các bộ chọn đơn giản trong một chuỗi các bộ chọn và do đó phân loại các phần tử trên các đặc điểm không trình bày, các phần tử giả tạo ra các phần tử ảo mới.
Người giới thiệu
W3C