Hover::after trước CSS
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 Show 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ư 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 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ư 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 Xem Pen Untitled của Shimin Zhang (@shimin-zhang) trên CodePen Sự khác biệt giữa Pseudo-Class và Pseudo-ElementPseudo-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 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ử Người đọc đang nghĩ 'còn 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ả Đây là một ví dụ, phần tử giả Xem Pen Untitled của Shimin Zhang (@shimin-zhang) trên CodePen Cách kết hợp Pseudo-Class với Pseudo-ElementsViệ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 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 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. 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 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 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 Làm cách nào để sử dụng trước và sau trong CSS?Định nghĩa và cách sử dụng
. trước khi bộ chọn chèn nội dung nào đó trước nội dung của từng (các) phần tử được chọn The ::before selector inserts something before the content of each selected element(s) . Sử dụng thuộc tính nội dung để chỉ định nội dung cần chèn. Sử dụng. sau bộ chọn để chèn một cái gì đó sau nội dung.
Là gì. di chuột trong CSS?CSS. bộ chọn di chuột là một trong nhiều lớp giả được sử dụng để tạo kiểu cho các phần tử. . di chuột được được sử dụng để chọn các thành phần mà người dùng di chuột qua . Nó có thể được sử dụng trên tất cả các phần tử, không chỉ trên các liên kết.
Đâu là sự khác biệt giữa aftervà. sau trong CSS?CSS. trước khi bộ chọn chèn nội dung trước phần tử được chọn. CSS. sau khi chèn nội dung sau một phần tử được chỉ định |