4.6 KiB

Raw Blame History

title	localeTitle
Selectors	محددات

محددات

المحددات هي قواعد CSS لاستهداف عناصر HTML لتطبيق الأنماط. أسماء العلامات وأسماء الفئات والمعرفات والسمات هي بعض الخطافات المستخدمة كمحددات.

محدد بناء الجملة

ستتراكم المحضرات مرتبة في تسلسل محدد لقاعدة لاستهداف العناصر. مثال،

`/* selects anchor tags */ a { color: orange; }

/* selects elements with hero class */ .hero { text-align: center; } `

نوع من المحددات

النوع | وصف ------- | ------------ اكتب المحددات يتم استخدام أسماء العلامات لتحديد عناصر مثل h1 أو a . محدد عالمي المحدد الذي ينطبق على جميع العناصر. div * يطابق جميع العناصر داخل عناصر div. اختيار السمة | المحددات التي تستهدف العناصر بناءً على سماتها [واختياريا ، قيمها]. h1[title] بتحديد عناصر h1 باستخدام سمة title . اختيار الطبقة | محدد يستهدف العناصر باستخدام أسماء الفئات الخاصة بهم. محدد الهوية | المحدد الذي يستخدم معرف لاستهداف العناصر. #logo يختار العنصر مع logo #logo . اختيار زائف من الدرجة | محددات خاصة تستهدف عناصر تستند إلى حالتها. a:hover يطبق محدد a:hover النمط عند a:hover المؤشر فوق الروابط.

المحددات Comborators

Combinator | غرض ----------- | ------------ white space | سليل combinator. .nav li يختار كل li الأطفال داخل الطبقة .nav ، بما في ذلك متداخلة li العناصر. > | طفل combinator. .menu > li يحدد كل li الأطفال المباشرين للعناصر ذات فئة .menu . + | المجاور الأخت المشارك. .logo + h1 يستهدف h1 الذي هو .logo مباشرة إلى فئة .logo . ~ | الأخت الأختام العامة. header ~ div تستهدف عناصر div التي هي أشقاء لعناصر header .

هذا القسم تفاصيل كل هؤلاء الناخبين.

معلومات اكثر:

يمكنك معرفة المزيد حول المحددات على هذه الموارد:

يتم تحديد المحددات في CSS (أوراق الأنماط المتتالية) استنادًا إلى الخصوصية ، حيث يمكننا أن نكون أكثر تحديدًا في قواعد الأنماط الخاصة بنا وتجاوز القواعد الأخرى التي قد تستهدف نفس العنصر ولكنها ليست محددة. تعتمد الطريقة التي يعمل بها هذا التسلسل الهرمي الخاص على الوزن ، بمعنى أن العنصر المحدد له وزن 1 (واحد) ، فمحدد الفئة له وزن 10 (10) ، ومُحدّد هوية له وزن مائة (100). نحن قادرون على الجمع بين المختارين المختلفين معًا أكثر تحديدًا للعنصر الذي نريد تغييره.

على سبيل المثال:

css p { color: blue; } p .red { color: red; } سيحدد نوع محدد p جميع العناصر p في مستند html الخاص بنا ، ولكن سيكون له وزن واحد فقط. على النقيض من ذلك ، فإن محدد الصف لديه وزن 11 بسبب السبب في أننا نقوم بدمج محدد نوع مع محدد فئة (هذا المحدد هو مطابقة جميع عناصر p مع فئة من اللون الأحمر). - ستحظى القواعد المستهدفة بشكل مباشر دائمًا بالأسبقية على القواعد التي ترث عناصر من سلفها. - * يتم تطبيق Specifity فقط عندما تستهدف إعلانات متعددة نفس العنصر ، ثم يتم تطبيق هذه القاعدة.
- * عادة ما يكون السبب هو عدم تطبيق بعض قواعد الأنماط الخاصة بك على العناصر التي تتوقعها.

4.6 KiB Raw Blame History