CSS سلکتورها
CSS انتخابگرها
موتور انتخابگر متن انتخابگر CSS را به شکل ساختاری تجزیه می‌کند و آن را در برابر درخت‌های DOM ارزیابی می‌نماید. این موتور هم‌زمان از پرس‌و‌جوهای مستقیم و هم تطبیق قوانین درکاسکد پشتیبانی می‌کند.
اجرای انتخابگرها
select() یک انتخابگر را در مقابل یک درخت ارزیابی می‌کند و نتایج مطابقت را باز می‌گرداند؛ element_matches() یک عنصر واحد را تست می‌کند. هر دو سینتکس استاندارد انتخابگرها را می‌پذیرند — انتخابگرهای نوع، کلاس، شناسه، ویژگی و شبه‌کلاس، شامل ترکیب‌های مرکب و پیچیده.
ساختارهای انتخابگر تجزیه‌شده
parse() یک SelectorList از ورودی‌های ComplexSelector و CompoundSelector تولید می‌کند که از TypeSelector، ClassSelector، IDSelector، AttributeSelector (با AttributeOperator)، UniversalSelector و Combinator بخش‌ها ساخته شده‌اند.
شبه‌کلاس‌ها
کلاس‌های شبه‌عملکردی به‌صورت صریح مدل‌سازی می‌شوند: IsPseudoClass، WherePseudoClass، HasPseudoClass، ComplexNotPseudoClass، و انواع ساختاری nth-child از طریق NthFilteredChildPseudoClass با NthArgument.
Specificity
specificity() مقدار سه‌تایی استاندارد برای یک سلکتور را محاسبه می‌کند، و max_specificity() یک فهرست را کاهش می‌دهد؛ match() تجزیه و ارزیابی را به‌هم می‌پیوندد. این‌ها همان مقادیری هستند که cascade استفاده می‌کند، بنابراین نتایج پرس‌وجو و سبک‌های محاسبه‌شده همیشه مطابقت دارند.
نکات و بهترین شیوه‌ها
- از
element_matches()داخل فیلترها استفاده کنید به‌جای اجرای مجددselect()برای هر عنصر - یک‌بار تجزیه کنید و
SelectorListرا وقتی همان سلکتور بر روی درخت‌های متعدد اجرا می‌شود، دوباره استفاده کنید - وقتی یک قاعده به‌طور غیرمنتظره‌ای cascade را از دست می‌دهد، مقادیر
specificity()را مستقیماً مقایسه کنید
مسائل رایج
| مشکل | دلیل | راه‌حل |
|---|---|---|
| انتخابگر هیچ‌چیزی را مطابقت نمی‌دهد | خطای نحوی در متن انتخابگر | parse() از طریق syntax_error رخ می‌دهد — پیام را بررسی کنید |
| بندهای با ویژگی برابر به‌صورت «غلط» حل می‌شوند | وابستگی به ترتیب | قوانین بعدی در برابر تساوی برنده می‌شوند؛ ترتیب قوانین را بررسی کنید |
سردرگمی :is() در مقابل :where() | :where() اختصاصیتی صفر اضافه می‌کند | بر اساس وزن مورد نظر در سلسله‌مراتبی انتخاب کنید |
FAQ
چگونه یک عنصر را در برابر یک سلکتور تست کنم؟
element_matches() — یک مقدار بولی برمی‌گرداند بدون اسکن درخت.
محاسبهٔ specificity چگونه انجام می‌شود؟
specificity() مقدار استاندارد (id, class, type) را به شکل یک تاپل باز می‌گرداند؛ گروه‌های :where() صفر مشارکت می‌دهند.
کدام pseudo-classها پشتیبانی می‌شوند؟
فرم‌های ساختاری در API: :is()، :where()، :has()، :not() با آرگومان‌های پیچیده، و سلکتورهای ساختاری به سبک nth-child.
خلاصهٔ API Reference
| کلاس/متد | توضیح |
|---|---|
select | یک سلکتور را در برابر یک درخت ارزیابی کنید |
element_matches | آزمایش یک عنصر |
parse | متن انتخابگر را به یک SelectorList تجزیه کنید |
specificity | محاسبهٔ تاپل اختصاصیت |
HasPseudoClass | فرم ساختاری :has() |
AttributeSelector | مطابقت‌گر ویژگی با عملگرها |
