47 lines
4.6 KiB
Markdown
47 lines
4.6 KiB
Markdown
---
|
||
title: Selectors
|
||
localeTitle: محددات
|
||
---
|
||
# محددات
|
||
|
||
المحددات هي قواعد 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` .
|
||
|
||
هذا القسم تفاصيل كل هؤلاء الناخبين.
|
||
|
||
#### معلومات اكثر:
|
||
|
||
يمكنك معرفة المزيد حول المحددات على هذه الموارد:
|
||
|
||
* [مواصفات محدد CSS3 الرسمي](https://www.w3.org/TR/css3-selectors)
|
||
* [صفحة الاختيارات على شبكة مطوري موزيلا](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors)
|
||
* [CSS مختارات الغش ورقة على أدلة FreeCodeCamp](https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet)
|
||
|
||
يتم تحديد المحددات في CSS (أوراق الأنماط المتتالية) استنادًا إلى _الخصوصية_ ، حيث يمكننا أن نكون أكثر تحديدًا في قواعد الأنماط الخاصة بنا وتجاوز القواعد الأخرى التي قد تستهدف نفس العنصر ولكنها ليست محددة. تعتمد الطريقة التي يعمل بها هذا التسلسل الهرمي الخاص على الوزن ، بمعنى أن العنصر المحدد له وزن 1 (واحد) ، فمحدد الفئة له وزن 10 (10) ، ومُحدّد هوية له وزن مائة (100). نحن قادرون على الجمع بين المختارين المختلفين معًا أكثر تحديدًا للعنصر الذي نريد تغييره.
|
||
|
||
على سبيل المثال:
|
||
|
||
`css p { color: blue; } p .red { color: red; }` سيحدد نوع محدد p جميع العناصر p في مستند html الخاص بنا ، ولكن سيكون له وزن واحد فقط. على النقيض من ذلك ، فإن محدد الصف لديه وزن 11 بسبب السبب في أننا نقوم بدمج محدد نوع مع محدد فئة (هذا المحدد هو مطابقة جميع عناصر p مع فئة من اللون الأحمر). - ستحظى القواعد المستهدفة بشكل مباشر دائمًا بالأسبقية على القواعد التي ترث عناصر من سلفها. - \* يتم تطبيق Specifity فقط عندما تستهدف إعلانات متعددة نفس العنصر ، ثم يتم تطبيق هذه القاعدة.
|
||
\- \* عادة ما يكون السبب هو عدم تطبيق بعض قواعد الأنماط الخاصة بك على العناصر التي تتوقعها. |