CSS Bộ chọn
CSS Bộ chọn
Selector engine phân tích văn bản selector CSS thành dạng có cấu trúc và đánh giá nó trên cây DOM. Nó hỗ trợ cả truy vấn trực tiếp và việc khớp quy tắc của cascade.
Chạy Bộ chọn
select() đánh giá một selector trên cây và trả về các khớp; element_matches() kiểm tra một phần tử duy nhất. Cả hai chấp nhận cú pháp selector chuẩn — selector kiểu, lớp, id, thuộc tính và pseudo-class, bao gồm các tổ hợp phức hợp và phức tạp.
Cấu trúc Selector đã phân tích
parse() tạo ra một SelectorList của ComplexSelector và CompoundSelector mục được xây dựng từ TypeSelector, ClassSelector, IDSelector, AttributeSelector (với AttributeOperator), UniversalSelector, và Combinator phần.
Các lớp giả
Các pseudo-class chức năng được mô hình hoá một cách rõ ràng: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, và các biến thể cấu trúc nth-child thông qua NthFilteredChildPseudoClass với NthArgument.
Specificity
specificity() tính toán bộ ba thành phần chuẩn cho một selector, và max_specificity() rút gọn một danh sách; match() liên kết việc phân tích và đánh giá lại với nhau. Đây là những giá trị mà cascade sử dụng, vì vậy kết quả truy vấn và kiểu đã tính luôn khớp nhau.
Mẹo và Thực hành Tốt nhất
- Sử dụng
element_matches()trong các bộ lọc thay vì chạy lạiselect()cho mỗi phần tử - Phân tích một lần và tái sử dụng
SelectorListkhi cùng một selector được áp dụng trên nhiều cây - Khi một quy tắc bất ngờ mất cascade, so sánh trực tiếp các giá trị
specificity()
Các vấn đề phổ biến
| Vấn đề | Nguyên nhân | Khắc phục |
|---|---|---|
| Bộ chọn không khớp với bất kỳ phần tử nào | Lỗi cú pháp trong văn bản bộ chọn | parse() gây ra qua syntax_error — kiểm tra thông báo |
| Các trường hợp độ đặc hiệu bằng nhau giải quyết “sai” | Phụ thuộc vào thứ tự | Các quy tắc sau thắng trong trường hợp hòa; kiểm tra thứ tự quy tắc |
Nhầm lẫn :is() vs :where() | :where() đóng góp độ đặc thù bằng 0 | Chọn dựa trên trọng số cascade dự định |
FAQ
Làm sao để kiểm tra một phần tử với bộ chọn?
element_matches() — nó trả về một giá trị boolean mà không quét cây.
Độ đặc hiệu được tính như thế nào?
specificity() trả về bộ ba thành phần tiêu chuẩn (id, class, type); các nhóm :where() đóng góp bằng không.
Những pseudo-class nào được hỗ trợ?
Các dạng cấu trúc trong API: :is(), :where(), :has(), :not() với các đối số phức tạp, và các bộ chọn cấu trúc kiểu nth-child.
API Reference Tóm tắt
| Lớp/Phương thức | Mô tả |
|---|---|
select | Đánh giá một selector đối với một cây |
element_matches | Kiểm tra một phần tử |
parse | Phân tích văn bản bộ chọn thành một SelectorList |
specificity | Tính toán tuple độ đặc hiệu |
HasPseudoClass | Mẫu :has() có cấu trúc |
AttributeSelector | Trình khớp thuộc tính với các toán tử |