خاصية زيادة العدّاد (counter-increment)
آخر تحديث: 2026-09-13
counter-increment خاصية زيادة العدّاد (counter-increment)
تزيد counter-increment قيمة واحد أو أكثر من عدّادات CSS وهي واحدة من الآليات الأساسية وراء الترقيم التلقائي. في كل مرة يطابق فيها عنصر المحدد، يُزاد العدّاد المحدد بالخطوة المعطاة (1 افتراضيًا). وتحتاج إلى counter-reset ودالة counter() في content لإنتاج ترقيم تلقائي كامل.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
counter-increment: none | <counter-name> <integer>?;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | لا تزيد |
<counter-name> <integer>? | القيمة | اسم العدّاد والخطوة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| counter-increment | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لا تزيد counter-increment إلا القيمة؛ فهي لا تعرضها. ادمجها مع content: counter(name) لإظهار الرقم في الصفحة.
❓ الأسئلة الشائعة
Qما الفرق بين counter-increment و counter-reset؟
Aتنشئ counter-reset عدّادًا وتُهيئه (تضبط قيمته الابتدائية، 0 افتراضيًا)، وتُعلن عادةً على الحاوية الأصلية. أما counter-increment فتزيد العدّاد في كل مرة يطابق فيها عنصر (بمقدار 1 لكل مطابقة افتراضيًا)، وتُكتب عادةً على العناصر المرقّمة. وبالاشتراك مع دالة counter() في content تُنتج ترقيمًا تلقائيًا كاملًا.
Qكيف أنشئ ترقيمًا متعدد المستويات مثل 1.1، 1.2؟
Aاستخدم مستويين من العدّاد: counter-reset: chapter خارجي مع counter-increment، و counter-reset: section داخلي مع counter-increment، ثم اعرض عبر content: counter(chapter) "." counter(section);. فينتج ترقيمًا بالصيغة 1.1.
Qهل يمكن أن تكون خطوة counter-increment غير 1؟
Aنعم. تزيد counter-increment: myCounter 2; بمقدار 2 في كل مرة؛ وإغفال الرقم يستخدم الافتراضي 1. كما يمكنك زيادة عدة عدّادات دفعة واحدة، مثل counter-increment: a 1 b 2;، وتعمل القيم السالبة أيضًا. تذكّر أنها لا تغير سوى قيمة العدّاد — يجب عرضها عبر counter() في content لرؤية الأرقام.
Qهل تختلط العدّادات في القوائم المتداخلة؟
Aلا. للعدّادات CSS نطاق: فإعلان counter-reset على عنصر ينشئ نسخة عدّاد جديدة تحجب نسخة الأصل، فتُعاد تشغيل القوائم الفرعية من قيمتها الابتدائية. فمثلًا، كل <ol> يعيد ضبط عدّاده يُنتج ترقيمًا مستقلًا عن الآخرين. وللمتابعة الترقيمية، تجاوز إعادة الضبط أو استخدم counters() لعرض المسار الهرمي الكامل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
