مختبر محددات CSS
اختبر محددات CSS على HTML تلصقه واعرض كل عنصر مطابق مع وسمه ونصه. يستخدم querySelectorAll فتطابق النتائج المتصفح تماماً.
ما هو مختبر محددات CSS؟
يشغّل مختبر محددات CSS محدداً على HTML تلصقه ويسرد كل عنصر مطابق مع outer HTML ومحتواه النصي. ويدعم كل ما يدعمه متصفحك، من محددات السمات إلى :not() و:is() و:has() و:nth-child().
كيفية استخدام مختبر محددات CSS
- أدخل محدد CSS، مثل
nav li:not(.active) > a[href^="/"]. - الصق HTML أو عدّله.
- اقرأ عدد المطابقات والوسم المظلَّل لكل مطابقة.
- انسخ كل HTML المطابق بزر Copy.
مثال
nav li:not(.active) > a[href^="/"] on the sample HTML
1 match: <a href="/blog" data-track="nav">Blog</a>
يطابق a[href] جميع الروابط الأربعة في العينة.
متى تستخدم مختبر محددات CSS
استخدمه لكتابة محددات لقواعد CSS أو أتمتة الاختبارات (Playwright وCypress) أو كشط الويب أو استدعاءات document.querySelector. لا يطبق الأنماط ولا يحسب الخصوصية، والفئات الزائفة الديناميكية مثل :hover لا تطابق أبداً في مستند ثابت.
كيف يعمل مختبر محددات CSS
يُحلَّل HTML إلى مستند منفصل بـ DOMParser (لا تُنفَّذ السكربتات) ويُمرَّر المحدد إلى querySelectorAll(). فالمطابقة هي ما يفعله متصفحك تماماً، بما في ذلك مستوى دعمه لميزات Selectors Level 4 الأحدث. تُلتقط المحددات غير الصالحة ويُبلَّغ عنها. يُعرض حتى 200 تطابق.
حالات الاستخدام الشائعة
- التحقق من أن محدد Playwright يطابق زراً واحداً بالضبط.
- بناء محدد كاشط لأسعار المنتجات.
- تعلم سلوك المحددات المركبة (> و+ و~) و:not().
- اختبار هل يدعم متصفحك :has().
الأسئلة الشائعة
لماذا لا يطابق محددي شيئاً في صفحة مكشوطة؟
قد تبني الصفحة HTML بجافاسكربت. الصق HTML المعروض من أدوات المطور (Copy outerHTML) لا المصدر الأصلي.
هل :has() مدعوم؟
نعم في Chrome وEdge وSafari وFirefox الحالية. يستخدم المختبر متصفحك، فتبلغ المتصفحات الأقدم أنه غير صالح.
هل يعرض الخصوصية؟
لا، يعرض فقط العناصر المطابقة.