Hôm trước, tôi đã cố gắng thêm kiểu gạch chân vào một phần tử khi di chuột và nó không hoạt động. Tôi không nhận ra mình đang tạo kiểu cho một phần tử giả được tạo bởi :after. Tôi thích biến thể một dấu hai chấm hơn :after. Nó có giá trị như ::after, cuộc đời thì ngắn ngủi và tôi là một nhà phát triển lười biếng. :after:hover của tôi không hoạt động và tôi cảm thấy thất vọng
Việc khắc phục sự cố khiến tôi suy nghĩ, liệu tôi có thể kết hợp các phần tử giả khác như ::first-letter và ::first-line không?
Trong bài đăng này, tôi sẽ tìm hiểu ngắn gọn về lịch sử của bộ chọn lớp giả và phần tử giả CSS, chúng khác nhau như thế nào, cách kết hợp chúng trong sử dụng hàng ngày và lý do tại sao bây giờ tôi chỉ là một người duy nhất ::after
Tại sao lại là. sau CSS hợp lệ?
Trước tiên, hãy xem qua một số lịch sử CSS. Lần đầu tiên tôi học CSS là vào đầu những năm 2010, khi CSS 2. 1 là '' và dấu hai chấm lang thang khắp vùng đất. Trong khi CSS 1 chỉ định các bộ chọn lớp giả như :link và :after0, thì CSS 2 đã giới thiệu các phần tử giả như :after1 và :after
Trước đó, người ta ít chú trọng đến sự khác biệt giữa phần tử giả và lớp giả - cả hai đều sử dụng cú pháp dấu hai chấm đơn. Đây cũng là lúc tôi mắc sai lầm khi kết hợp cả hai thành một khái niệm bộ chọn giả duy nhất trong đầu
Cú pháp hai dấu hai chấm cho phần tử giả được giới thiệu trong CSS Selector 3. Do nguyên tắc tương thích của web, bộ chọn phần tử giả từ CSS 2. 1 – bao gồm :after, :after1, :after5 và :after6– vẫn còn hiệu lực cho đến ngày nay. Tuy nhiên, các phần tử giả mới như :after7 không có phiên bản một dấu hai chấm tương ứng – hãy tự xem bằng cách chọn từng dòng trong ví dụ bên dưới
Xem Pen Untitled của Shimin Zhang [@shimin-zhang] trên CodePen
Sự khác biệt giữa Pseudo-Class và Pseudo-Element
Pseudo-Class và Pseudo-Elements đều là bộ chọn CSS có quyền truy cập thông tin bên ngoài những gì HTML DOM cung cấp – do đó có tiền tố 'giả'. Lấy bộ chọn :after8, nó cần biết vị trí con trỏ hiện tại của người dùng
Mặc dù các phần tử giả hoạt động trên một đối tượng giống như DOM, nhưng chúng tạo ra một cấu trúc CSS thuần túy và không thực sự ảnh hưởng đến DOM. Họ cũng có thêm một dấu hai chấm để biểu thị sự khác biệt này. Thực tế là phần tử ::after không phải là một nút DOM thực tế có liên quan đến khả năng truy cập, nội dung của chúng không tồn tại cho trình đọc màn hình và chỉ nên trang trí
Người đọc đang nghĩ 'còn ::after0 và ::after1 thì sao?' . Hai đoạn trước không hoàn toàn đúng, một số bộ chọn lớp giả là 'thủ thuật' hoặc 'lối tắt' hơn – Tôi ước W3C sẽ tạo một tên mới cho những bộ chọn đó để phân biệt rõ ràng
Xin nhắc lại, sự khác biệt về khái niệm giữa hai loại này là các bộ chọn lớp giả hành động trên một phần tử DOM hiện có bằng cách sử dụng một số thông tin bên ngoài trong khi phần tử giả tạo một phần tử mới, 'không thực sự ở đó' chỉ dành cho công cụ kết xuất. Chỉ có thể sử dụng bộ chọn giả :after0 để chọn các phần tử neo hiện có. Trong khi ::first-line tạo các phần tử không thể tồn tại với cấu trúc DOM đã cho – do đó có tên
Đây là một ví dụ, phần tử giả ::first-line được tạo bằng cách tách phần tử ::after5 thứ hai thành hai để chỉ thay đổi màu của từ đầu tiên
Xem Pen Untitled của Shimin Zhang [@shimin-zhang] trên CodePen
Cách kết hợp Pseudo-Class với Pseudo-Elements
Việc biết sự khác biệt giữa các lớp giả và các phần tử giả cho chúng ta biết điều gì về cách sử dụng chúng?
Đối với một, bộ chọn lớp giả hoạt động trên các phần tử và có thể được xâu chuỗi giống như bất kỳ bộ chọn ::after6 thực tế nào. ::after7 có giá trị như ::after8
Mặt khác, bộ chọn phần tử giả không thể được sử dụng thay thế cho nhau từ bộ chọn ::after9. Bạn không thể xâu chuỗi chúng. Phần tử giả không phải là phần tử thực – chúng không thể là mục tiêu của bộ chọn. :after:hover0 không hợp lệ vì ::first-line không phải là phần tử DOM thực. Chỉ sử dụng các phần tử giả ở cuối dòng bộ chọn
Như với tất cả mọi thứ về CSS, những điều trên không phải là quy tắc chắc chắn. :after:hover2 và :after:hover3 của ::first-letter hiện đang nằm trong bản nháp của biên tập viên dưới dạng sửa đổi đối với phần tử giả và cuối cùng có thể được đưa vào chính thức. Tuy nhiên, các ngăn xếp phần tử giả này nên được coi là ngoại lệ chứ không phải quy tắc
Logic tương tự được áp dụng khi kết hợp bộ chọn lớp giả và phần tử giả. Lớp giả dẫn đến các phần tử DOM, vì vậy các phần tử giả có thể được thêm vào – tại sao :after:hover5 là CSS hợp lệ. Thay đổi thứ tự và chúng tôi đang áp dụng pseudo-class cho một phần tử không tồn tại – tại sao :after:hover6 không hợp lệ
Thanh bên, nếu bạn thích đọc bài viết này cho đến nay, vui lòng chia sẻ nó với những người khác. Nếu bạn thực sự thích nó và không muốn bỏ lỡ phần tiếp theo, bạn có thể đăng ký bên dưới để nhận bài viết mới trong hộp thư đến của bạn hàng tuần
Dưới đây là một số quy tắc cần nhớ vào lần tới khi bạn thấy mình sử dụng bộ chọn giả
Quy tắc 1. Các lớp giả có thể được sử dụng như thực tế. bộ chọn lớp và được sử dụng tự do. P. bay lượn. lớp học làm việc
Quy tắc 2. Các phần tử giả phải luôn ở cuối bộ chọn của bạn, chúng không thể bị xâu chuỗi vì chúng không chọn các phần tử DOM thực
Quy tắc 3. Không sử dụng biến thể một dấu hai chấm của các phần tử giả – ngay cả khi nó dễ dàng hơn – quá dễ bị lỗi khi chúng có cùng cú pháp. Ngoài ra, bây giờ bạn phải nhớ rằng :after hoạt động chứ không phải :after:hover8
Trước khi tôi tiếp tục, đây là Code Pen với một số ví dụ về lớp giả và phần tử giả. Sử dụng nó để kiểm tra kiến thức của bạn. Đọc CSS cho từng div và xem hành vi của nó có phù hợp với mong đợi của bạn không
Xem Phần tử giả bút và Bộ chọn giả của Shimin Zhang [@shimin-zhang] trên CodePen
Nếu bạn thích bài đăng này, bạn cũng có thể muốn tìm hiểu về cách tạo API kiểu bằng Thuộc tính tùy chỉnh CSS hoặc khi nào bạn nên sử dụng đơn vị CSS px vào năm 2022