أداة اختبار محدّدات CSS
اختبر المحددات مقابل HTML.
حول هذه الأداة
تطبّق الأداة محدّد CSS على نموذج HTML قصير وتسرد العناصر المطابقة. يتم التحليل محليًا عبر DOMParser، فلا يخرج أي محتوى من متصفحك.
طريقة الاستخدام
عدّل المحدّد ونموذج HTML، ثم شغّل الاختبار واقرأ عدد المطابقات مع المقاطع المستخرجة للتحقّق من افتراضاتك حول querySelector، ثم قارن النتيجة بما يتوقعه الكود في مشروعك.
مثال
يحتوي النموذج على بطاقة بعنوان ابن وعنصر شقيق بلا صنف.
إدخال
div.card > h2مخرجات
1 match(es): <h2>…</h2>نصيحة
الأداة وسيلة واضحة لشرح :nth-child والفرق بين محدّد الأبناء ومحدّد الأحفاد.
معلومات مفيدة
هل يُرسل HTML الخاص بي إلى أي مكان؟
لا. تُحلَّل العيّنة بواسطة DOMParser الخاص بالمتصفح في هذه الصفحة، ويُنفَّذ المحدد بـ querySelectorAll.
لماذا يعيد محدد صالح صفر نتائج؟
غالبًا يكون المركِّب أو اسم الفئة مزاحًا بمستوى واحد. تحقق من الفرق بين الابن (>) والحفيد (مسافة)، وقارن تهجئة الفئة مع شيفرة العيّنة.