:heading
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
:heading là lớp giả CSS khớp với tất cả phần tử tiêu đề trong tài liệu.
Cú pháp
:heading {
/* ... */
}
Mô tả
Lớp giả :heading cho phép bạn áp dụng kiểu cho tất cả các tiêu đề cùng lúc, thay vì phải khớp và tạo kiểu cho từng tiêu đề riêng lẻ.
Lớp giả này chỉ khớp với những phần tử được mặc định nhận diện về mặt ngữ nghĩa là tiêu đề (<h1> đến <h6>). Các phần tử có role="heading" sẽ không được khớp; bạn có thể chọn chúng bằng cách dùng bộ chọn thuộc tính [role="heading"].
Lớp giả :heading có cùng độ đặc hiệu với bộ chọn lớp, tức là 0-1-0. Vì vậy :heading có độ đặc hiệu 0-1-0, trong khi h1, h2, h3, h4, h5, h6 có độ đặc hiệu 0-0-1 và section:heading có độ đặc hiệu 0-1-1.
Ví dụ
Tạo kiểu cho tất cả tiêu đề
Trong ví dụ này, chúng ta dùng lớp giả :heading để tạo kiểu cho nhiều cấp độ tiêu đề.
HTML
Tài liệu chứa các tiêu đề ở ba cấp độ khác nhau, cùng với các phần tử đoạn văn <p>.
<h1>Mastering CSS</h1>
<h2>Chapter 1: Selectors</h2>
<p>
A CSS selector is the part of a CSS rule that describes what elements in a
document the rule will match.
</p>
<h3>1.1 Pseudo-classes</h3>
<p>
CSS pseudo-classes enable selecting elements based on information that lies
outside of the document tree.
</p>
CSS
Chúng ta đặt các phần tử tiêu đề thành in nghiêng và màu đỏ cà chua.
:heading {
color: tomato;
font-style: italic;
}
Kết quả
Lớp giả :heading áp dụng color và font-style cho tất cả các tiêu đề trong tài liệu, nhưng không áp dụng cho các đoạn văn:
Đặc tả
| Specification |
|---|
| Selectors Level 5 # headings |