CSS ตัวเลือก
CSS ตัวเลือก
เครื่องยนต์ตัวเลือกทำการแยกข้อความตัวเลือก CSS เป็นรูปแบบโครงสร้างและประเมินผลต่อโครงสร้าง DOM. มันรองรับทั้งการสืบค้นโดยตรงและการจับคู่กฎของ cascade.
การเรียกใช้ตัวเลือก
select() ประเมินตัวเลือกต่อโครงสร้างและคืนผลการจับคู่; element_matches() ทดสอบองค์ประกอบเดียว. ทั้งสองรับไวยากรณ์ตัวเลือกมาตรฐาน — type, class, id, attribute, and pseudo-class selectors, รวมถึงการผสมแบบเชื่อมต่อและซับซ้อน.
โครงสร้างตัวเลือกที่แยกวิเคราะห์
parse() สร้าง SelectorList ของ ComplexSelector และ CompoundSelector รายการที่สร้างจาก TypeSelector, ClassSelector, IDSelector, AttributeSelector (พร้อมกับ AttributeOperator), UniversalSelector, และ Combinator ส่วน.
คลาสปลอม
Pseudo-class ฟังก์ชันถูกจำลองอย่างชัดเจน: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, และตัวแปรโครงสร้าง nth-child ผ่าน NthFilteredChildPseudoClass พร้อม NthArgument.
Specificity
specificity() คำนวนทูเพิลสามส่วนมาตรฐานสำหรับตัวเลือก, และ max_specificity() ลดรายการ; match() ผูกการพาร์สและการประเมินผลเข้าด้วยกัน. ค่าต่าง ๆ เหล่านี้เป็นค่าเดียวกับที่ cascade ใช้, ดังนั้นผลลัพธ์การสืบค้นและสไตล์ที่คำนวนได้จึงสอดคล้องกันเสมอ.
เคล็ดลับและแนวปฏิบัติที่ดีที่สุด
- ใช้
element_matches()ภายในฟิลเตอร์แทนการเรียกใช้select()ซ้ำสำหรับแต่ละอิลเมนต์ - ทำการพาร์สครั้งเดียวและใช้
SelectorListซ้ำเมื่อตัวเลือกเดียวกันทำงานกับหลายต้นไม้ - เมื่อกฎสูญเสีย cascade อย่างไม่คาดคิด, เปรียบเทียบค่า
specificity()โดยตรง
ปัญหาทั่วไป
| ปัญหา | สาเหตุ | แก้ไข |
|---|---|---|
| Selector ไม่ตรงกับอะไรเลย | ข้อผิดพลาดไวยากรณ์ในข้อความ selector | parse() เกิดขึ้นผ่าน syntax_error — ตรวจสอบข้อความ |
| กรณีเท่าเทียมของความเฉพาะเจาะจงจะถูกแก้เป็น “wrong” | การพึ่งพาลำดับ | กฎที่ตามมาจะชนะในกรณีเท่าเทียม; ตรวจสอบลำดับของกฎ |
ความสับสนระหว่าง :is() กับ :where() | :where() มี specificity เป็นศูนย์ | เลือกตามน้ำหนักของ cascade ที่ตั้งใจ |
FAQ
ฉันจะทดสอบองค์ประกอบหนึ่งต่อกับตัวเลือกได้อย่างไร?
element_matches() — มันคืนค่าแบบบูลีนโดยไม่สแกนต้นไม้.
ความจำเพาะถูกคำนวณอย่างไร?
specificity() คืนค่า tuple ส่วนประกอบมาตรฐาน (id, class, type); กลุ่ม :where() มีค่าเป็นศูนย์.
รองรับ pseudo-classes ใดบ้าง?
รูปแบบเชิงโครงสร้างใน API: :is(), :where(), :has(), :not() พร้อมอาร์กิวเมนต์ซับซ้อน และตัวเลือกโครงสร้างแบบ nth-child.
สรุป API Reference
| คลาส/เมธอด | คำอธิบาย |
|---|---|
select | ประเมิน selector ต่อ tree |
element_matches | ทดสอบอิลิเมนต์หนึ่ง |
parse | แยกวิเคราะห์ข้อความตัวเลือกเป็น SelectorList |
specificity | คำนวณทูเพิลความจำเพาะ |
HasPseudoClass | รูปแบบ :has() เชิงโครงสร้าง |
AttributeSelector | ตัวจับคู่แอตทริบิวต์ด้วยตัวดำเนินการ |
