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ại select() cho mỗi phần tử
  • Phân tích một lần và tái sử dụng SelectorList khi 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ânKhắc phục
Bộ chọn không khớp với bất kỳ phần tử nàoLỗi cú pháp trong văn bản bộ chọnparse() 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 0Chọ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ứcMô tả
selectĐánh giá một selector đối với một cây
element_matchesKiểm tra một phần tử
parsePhân tích văn bản bộ chọn thành một SelectorList
specificityTính toán tuple độ đặc hiệu
HasPseudoClassMẫu :has() có cấu trúc
AttributeSelectorTrình khớp thuộc tính với các toán tử

Xem thêm

 Tiếng Việt