4.6 KiB
| title | localeTitle |
|---|---|
| CSS Selectors Cheat Sheet | CSS المختارات الغش ورقة |
مختارات CSS
في CSS ، تكون المحددات هي الأنماط المستخدمة لتحديد عناصر DOM.
هنا مثال على استخدام المحددات. في التعليمة البرمجية التالية ، تكون a و h1 محددات:
`a { color: black; }
h1 { font-size 24px; } `
قائمة الغش من المحددات
| محدد | يختار |
| --- | --- | | head | يحدد العنصر مع علامة head
| .red | يختار جميع العناصر مع الطبقة "الحمراء"
| #nav | يحدد العناصر التي تحتوي على "nav" Id |
| div.row | يحدد كل العناصر بعلامة div وفئة 'row' | | [aria-hidden="true"] | يحدد جميع العناصر ذات السمة aria-hidden بقيمة "true" | | * | اختيار حرف البدل. يحدد كل عناصر DOM. انظر أدناه لاستخدامه مع محددات أخرى |
يمكننا الجمع بين المحددات بطرق مثيرة للاهتمام. بعض الأمثلة:
| المختارون | يختار |
| --- | --- | | li a DOM descendant combinator. كل a العلامات التي طفلا من li علامات |
| div.row * | يقوم بتحديد كل العناصر التي تكون تابعة (أو الطفل) للعناصر ذات علامة div وفئة 'row' |
| li > a | اختلاف combinator. حدد أحفاد مباشرة ، بدلا من كل أحفاد مثل محددات السليل |
| li + a | combinator المجاور. فإنه يحدد العنصر الذي يسبقه مباشرة العنصر السابق. في هذه الحالة ، فقط أول a بعد كل li . |
| li, a | يختار كل a العناصر وكل li العناصر. |
| li ~ a | الأخت الأصطف. يختار a عنصر بعد li عنصر. |
من المفيد أيضًا اختيار محددات الزائفة أو الطبقات الهيكلية الزائفة لتحديد العناصر الهيكلية من DOM. فيما يلي بعض منها:
| المختارون | يختار | | --- | --- |
| :first-child | استهدف العنصر الأول مباشرة داخل (أو طفل) عنصر آخر
| :last-child | استهدف العنصر الأخير مباشرة داخل (أو تابع) عنصر آخر
| :nth-child() | استهدف العنصر n مباشرة داخل عنصر آخر (أو تابع لـ). يعترف الأعداد الصحيحة ، even ، odd ، أو الصيغ |
| a:not(.name) | يختار كل a العناصر التي ليست من .name الطبقة |
| ::after | يسمح بإدخال محتوى على صفحة من CSS بدلاً من HTML. في حين أن النتيجة النهائية ليست في الواقع في DOM ، فإنها تظهر على الصفحة كما لو كانت كذلك. يتم تحميل هذا المحتوى بعد عناصر HTML. |
| ::before | يسمح بإدخال محتوى على صفحة من CSS بدلاً من HTML. في حين أن النتيجة النهائية ليست في الواقع في DOM ، فإنها تظهر على الصفحة كما لو كانت كذلك. يتم تحميل هذا المحتوى قبل عناصر HTML. |
يمكننا استخدام فصول زائفة لتحديد حالة خاصة لعنصر DOM ولكن لا تشير إلى عنصر في حد ذاته. بعض الأمثلة:
| فئة زائفة | يختار | | --- | --- | | :hover | يحدد عنصر يحوم مؤشر الماوس
| :focus | يحدد عنصر تلقي التركيز من لوحة المفاتيح أو برمجيًا | | :active | يحدد عنصر يتم النقر بواسطة مؤشر الماوس
| :link | يختار كل الروابط التي لم يتم النقر بعد |
| :visited | يحدد الرابط الذي تم بالفعل النقر |
ألعاب
CSS Diner هي لعبة الويب التي تعلم كل شيء تقريبا هناك لمعرفة الجمع بين المحددات.
مرجع إضافي
هناك العديد من محددات CSS! تعرف عليهم في CodeTuts ، CSS-tricks.com ، w3schools.com أو في موزيلا شبكة مطوري .