تفصیلات انتخاب‌گرهای class CSS

تسمح نماذج التعداد بتخصيص النمط بطريقة مستقلة عن عناصر الوثيقة.

انتخاب‌گرهای class CSS

تسمح نماذج التعداد بتخصيص النمط بطريقة مستقلة عن عناصر الوثيقة.

يمكن استخدام هذا المبدأ بشكل مستقل أو دمج مع عناصر أخرى.

نصيحة:لا يمكن استخدام هذه النماذج إلا بعد تسمية الوثيقة بشكل مناسب، لذا فإن استخدام هذين النوعين من النماذج يتطلب عادة بعض التخطيط والتصميم.

من أجل تطبيق النمط دون النظر في العناصر المعدة مسبقًا، فإن الطريقة الأكثر شيوعًا هي استخدام نماذج التعداد.

تعديل كود HTML

قبل استخدام نماذج التعداد، يجب تعديل العلامات في الوثيقة المحددة لضمان عمل نماذج التعداد بشكل صحيح.

من أجل ربط نماذج التعداد بالعناصر، يجب تحديد class بمقدار مناسب. انظر إلى الكود HTML التالي:

<h1 class="important">
هذا العنوان مهم جدًا.
</h1>
<p class="important">
هذه الفقرة مهمة جدًا.
</p>

في الكود المقدم، تم تحديد class للعنصرين كـ important: العنوان الأول (عنصر h1)، والفقرة الثانية (عنصر p).

النحو

ثم نستخدم الجملة التالية لتطبيق النمط على هذه العناصر المعدة، وهي نقطة أمام الاسم، ثم دمج اختيار المربعات:

*.مهم {لون:أحمر;}

إذا كنت ترغب في اختيار جميع العناصر التي تحتوي على نفس الاسم في class، يمكنك تجاهل اختيار المربعات، ولا يؤدي ذلك إلى أي تأثير سلبي:

.مهم {لون:أحمر;}

آزمایش کنید

دمج اختيار العنصر

يمكن دمج اختيار النوع مع اختيار العنصر.

على سبيل المثال، قد ترغب في أن تكون فقط الأسطر تظهر نصًا أحمر:

p.مهم {لون:أحمر;}

الاختيار الآن سيطابق جميع العناصر التي تحتوي على class مهم في عناصر p، ولكن أي نوع آخر من العناصر لا يطابق، مهما كان وجود هذا class. يفسر اختيار p.مهم بأنه: "جميع العناصر التي تحتوي على class مهم هي أسطر". لأن عنصر h1 ليس أسطرًا، لا تتطابق اختيار هذا القاعدة معه، لذا لن يصبح النص في h1 أحمر.

إذا كنت ترغب في تحديد نمط مختلف له1، يمكنك استخدام اختيار h1.مهم:

p.مهم {لون:أحمر;}
h1.مهم {لون:أزرق;}

آزمایش کنید

اختيار متعدد من النوع CSS

في القسم السابق، قمنا بمعالجة حالة وجود كلمة واحدة في قيمة class. في HTML، قد تحتوي قيمة class على قائمة من الكلمات، مفصولة بفواصل البيانات. على سبيل المثال، إذا كنت ترغب في تسمية عنصر معين كـ مهم و تحذير في نفس الوقت، يمكنك كتابتها كالتالي:

<p class="مهمة تحذير">
هذا الفقرة هو تحذير مهم جدًا.
</p>

ترتيب الكلمتين غير مهم، يمكنك كتابتها كـ warning important أيضًا.

نفترض أن جميع العناصر التي تحتوي على class مهمة تكون بثقيلة، وأن جميع العناصر التي تحتوي على class تحذير تكون ناعمة، والعناصر التي تحتوي على both important و warning تملك خلفية فضية. يمكن كتابتها كالتالي:

.مهمة {كثافة:ثقيلة;}
.التحذير {نمط:ناعم;}
.مهمة.التحذير {خلفية:فضي;}

آزمایش کنید

من خلال ربط اختيارين من النوع معًا، يمكنك اختيارهمزمان شامل این نام‌های کلاس}عناصر (ترتیب نام‌های کلاس مهم نیست).

اگر یک انتخاب‌گر چندین نوع شامل یک نام کلاس باشد که در لیست نام‌های کلاس وجود ندارد، تطابق شکست خواهد خورد. به قوانین زیر نگاه کنید:

.important.urgent {background:silver;}

به طور پیش‌بینی‌پذیر، این انتخاب‌گر فقط با عناصر p که ویژگی class شامل کلمات important و urgent باشد، مطابقت دارد. بنابراین، اگر ویژگی class یک عنصر p شامل کلمات important و warning باشد، نمی‌تواند مطابقت داشته باشد. اما می‌تواند با عناصر زیر مطابقت داشته باشد:

<p class="important urgent warning">
این پاراگراف یک هشدار بسیار مهم و فوری است.
</p>

آزمایش کنید

موضوع مهم:در نسخه‌های قبل از IE7، مرورگرهای Internet Explorer مختلف در پلتفرم‌های مختلف نمی‌توانند انتخاب‌گرهای چندین نوع را به درستی پردازش کنند.