:heading()
Khả dụng hạn chế
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.
Hàm :heading() là lớp giả CSS đại diện cho tất cả phần tử tiêu đề có cấp độ khớp với danh sách số nguyên được phân cách bằng dấu phẩy. Điều này cho phép bạn tạo kiểu cho các phần tử ở các cấp tiêu đề cụ thể cùng một lúc, thay vì phải khớp và tạo kiểu cho từng phần tử riêng lẻ.
Note:
Lớp giả hàm :heading() có cùng độ đặc hiệu với bộ chọn lớp, tức là 0-1-0. Ví dụ, section:heading() có độ đặc hiệu là 0-1-1.
Cú pháp
:heading( <integer># ) {
/* ... */
}
Tham số
Hàm lớp giả :heading() nhận một danh sách <integer> được phân cách bằng dấu phẩy, đại diện cho các cấp tiêu đề cần tạo kiểu.
Ghi chú sử dụng
Lớp giả hàm :heading() chỉ khớp với các phần tử được nhận diện về mặt ngữ nghĩa là tiêu đề. Nó không khớp với các phần tử sử dụng thuộc tính role="heading" hoặc 'aria-level'.
Cấp tiêu đề được dùng bởi :heading() có thể khác với bộ chọn kiểu của phần tử trong trường hợp trình duyệt tính toán cấp tiêu đề hiển thị khác. Ví dụ, h1:heading(3) sẽ khớp với bất kỳ phần tử <h1> nào được hiển thị là tiêu đề cấp 3.
Ví dụ
Chọn các cấp tiêu đề cụ thể
Trong ví dụ này, một danh sách giá trị được phân cách bằng dấu phẩy được dùng để nhắm mục tiêu các tiêu đề ở cấp lẻ (<h1> và <h3>) và cấp chẵn (<h2> và <h4>).
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
:heading(1, 3) {
color: tomato;
}
:heading(2, 4) {
color: slateblue;
}
Đặc tả
| Thông số kỹ thuật |
|---|
| Selectors Level 5 # headings |