CSS pseudo-elements
Module CSS pseudo-element định nghĩa các phần tử trừu tượng không có mặt trực tiếp trong cây tài liệu. Các phần tử trừu tượng này, được gọi là pseudo-elements, đại diện cho các phần của render tree có thể được chọn và tạo style. Pseudo-elements được dùng để tạo ra các trừu tượng về cây tài liệu ngoài những gì cây tài liệu cung cấp.
Note: Trang này giới thiệu một CSS module. Để tìm danh sách đầy đủ tất cả pseudo-elements được định nghĩa bởi các đặc tả CSS, hãy xem trang tham khảo pseudo-elements.
Pseudo-elements được đặt trước bằng hai dấu hai chấm (::). Bạn thêm pseudo-elements vào các selector (như trong p::first-line) để nhắm vào và tạo style cho các phần tử giả này.
Pseudo-elements cho phép nhắm vào các thực thể không được đưa vào HTML và các phần nội dung không thể được nhắm vào theo cách khác mà không thêm markup bổ sung. Hãy xem xét placeholder của phần tử <input>. Đây là một phần tử trừu tượng và không phải là một node riêng biệt trong cây tài liệu. Bạn có thể chọn placeholder này bằng cách dùng pseudo-element ::placeholder. Như một ví dụ khác, pseudo-element ::selection khớp với nội dung hiện đang được người dùng đánh dấu, cho phép bạn tạo style cho những gì được khớp khi người dùng tương tác với nội dung và thay đổi lựa chọn. Tương tự, pseudo-element ::first-line nhắm vào dòng đầu tiên của một phần tử, tự động cập nhật nếu số ký tự của dòng đầu tiên thay đổi, mà không cần truy vấn độ dài dòng của phần tử.
Tham khảo
Selectors
::after::before::file-selector-button::first-letter::first-line::grammar-error::highlight()::marker::placeholder::search-text::selection::spelling-error::target-text
Đặc tả kỹ thuật cũng định nghĩa pseudo-element ::details-content và các sub-pseudo element ::postfix và ::prefix. Các pseudo-element này chưa được hỗ trợ bởi bất kỳ trình duyệt nào. Pseudo-element ::highlight() được đưa vào module này, nhưng hầu hết các chi tiết được cung cấp trong CSS custom highlight API.
Interfaces
CSSPseudoElementinterfaceCSSPseudoElement.elementpropertyCSSPseudoElement.typeproperty
Thuật ngữ
- Thuật ngữ glossary Pseudo-element
Hướng dẫn
- CSS pseudo-elements
-
Danh sách theo thứ tự bảng chữ cái của các pseudo-element được định nghĩa bởi tất cả các đặc tả CSS và WebVTT.
- Learn: Pseudo-classes and pseudo-elements
-
Phần về CSS building blocks về selector. Bài viết này định nghĩa pseudo-element là gì và cách nó có thể kết hợp với pseudo-classes và được dùng để tạo nội dung với pseudo-elements
::beforevà::after. - How to create fancy boxes using pseudo-elements
-
Ví dụ về tạo style cho nội dung được tạo bằng cách dùng pseudo-elements
::beforevà::afterđể tạo hiệu ứng thị giác.
Khái niệm liên quan
::backdrop-
Web Video Text Tracks Format (WebVTT) cues:
-
CSS multi-column layout module
-
CSS overflow module
-
CSS scoping module
-
CSS shadow parts module
-
CSS view transitions module
::view-transitionExperimental::view-transition-image-pair()Experimental::view-transition-group()Experimental::view-transition-new()Experimental::view-transition-old()Experimental
-
Thuộc tính
placeholdercủa phần tử<input> -
Selector
:placeholder-shown -
Thuộc tính
AnimationEvent.pseudoElement -
Thuộc tính
KeyframeEffect.pseudoElement -
Thuộc tính
TransitionEvent.pseudoElement
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 |
Xem thêm
- Danh sách pseudo-elements
- Specificity
- CSS selectors module
- CSS shadow-parts module
- CSS generated content module
- CSS positioned layout module
- CSS custom highlight API