61 lines
2.2 KiB
Markdown
61 lines
2.2 KiB
Markdown
|
---
|
||
|
|
title: Override Styles in Subsequent CSS
|
||
|
|
localeTitle: تجاوز الأنماط في CSS لاحقة
|
||
|
|
---
|
||
|
|
## تجاوز الأنماط في CSS لاحقة
|
||
|
|
|
||
|
|
الشيء الأكثر أهمية الذي يجب تذكره عند الرغبة في تجاوز الأنماط في CSS اللاحقة هو ترتيب إنشاء الفئات.
|
||
|
|
|
||
|
|
آخر نمط محدّث سيأخذ الأولوية على الفئات المكتوبة سابقاً.
|
||
|
|
|
||
|
|
فمثلا:
|
||
|
|
|
||
|
|
`
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
color: purple;
|
||
|
|
}
|
||
|
|
.red-text {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
.blue-text {
|
||
|
|
color: blue;
|
||
|
|
{
|
||
|
|
</style>
|
||
|
|
`
|
||
|
|
|
||
|
|
الآن، عند إنشاء أي نص في `body` ، وسوف يكون لون النص `purple` المسندة إليها.
|
||
|
|
|
||
|
|
لبدء تجربة عملية الإلغاء ، يمكنك الآن إضافة فئة `"red-text"` لمشاهدة النتائج.
|
||
|
|
|
||
|
|
باستخدام التنسيق أعلاه ، سيتجاوز النص أدناه لون الخط `purple` السابق `purple` `red` .
|
||
|
|
|
||
|
|
`
|
||
|
|
<h1 class="red-text">Example</h1>
|
||
|
|
`
|
||
|
|
|
||
|
|
عندما تريد إضافة عدة فئات ، يمكنك استخدام هذا التنسيق:
|
||
|
|
|
||
|
|
`
|
||
|
|
<h1 class="class-name1 class-name2 class-name3">Example</h1>
|
||
|
|
`
|
||
|
|
|
||
|
|
يمكنك الآن إضافة الفئة الأخيرة التي تم إنشاؤها أعلاه ( `"blue-text"` ) إلى نفس المثال أعلاه لمشاهدة النتائج.
|
||
|
|
|
||
|
|
`
|
||
|
|
<h1 class="red-text blue-text">Example</h1>
|
||
|
|
`
|
||
|
|
|
||
|
|
سيؤدي ذلك تلقائيًا إلى اختيار الفصل الأخير الذي تم إنشاؤه في قسم الأنماط ، والذي كان في هذه الحالة هو `"blue-text"` .
|
||
|
|
|
||
|
|
حتى إذا قمت بتطبيق `red-text` للفئة الأولى خلف `red-text` `blue-text` للفئة الثانية ، فستقوم عملية إلغاء الاختيار باختيار الفئة التي تم إنشاؤها مؤخرًا. في هذه الحالة ، يكون هذا الفصل هو `blue-text` .
|
||
|
|
|
||
|
|
لذلك ، على سبيل المثال:
|
||
|
|
|
||
|
|
`
|
||
|
|
<h1 class="blue-text red-text">Example</h1>
|
||
|
|
`
|
||
|
|
|
||
|
|
سيظل هذا يعرض لون خط `blue` بسبب الترتيب في قسم الأنماط.
|
||
|
|
|
||
|
|
تم إنشاء فئة `blue-text` الماضي ، وحرث من أسفل ( `</style>` ).
|