الخاصية counter-increment
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية counter-increment
في CSS تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset
.
بطاقة الخاصية
القيمة الابتدائية | none
|
---|---|
تُطبَّق على | كل العناصر. |
قابلة للوراثة | لا |
قابلة للتحريك | لا |
القيمة المحسوبة | كما حُدِّدَت. |
/* الزيادة بمقدار 1 */
counter-increment: my-counter;
/* الإنقاص بمقدار 1 */
counter-increment: my-counter -1;
/* زيادة أحد العدادات بمقدار 1 وإنقاص الثاني بمقدار 4*/
counter-increment: counter1 counter2 -4;
/* عدم زيادة أو إنقاص أيّ عداد، وتُستخدَم لتجاوز القواعد التي لها أولوية أقل */
counter-increment: none;
/* القيم العامة */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
أمثلة
القاعدة الآتية ستزيد من قيمة العداد my-counter
بمقدار 1
:
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Bootstrap Tutorial</h2>
<h2>SQL Tutorial</h2>
<h2>PHP Tutorial</h2>
شيفرة CSS:
body {
/* Set "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* Increment "my-counter" by 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 2.0 | 1.0 | 8.0 | 9.2 | 1.0 |
البنية العامة
تقبل الخاصية counter-increment
أحد الأشكال الآتية:
<custom-ident>
تُسمي العداد ويتبعها اختياريًا عدد صحيح<integer>
، ويمكنك تحديد أي عدد تشاء من العدّادات لزيادة أو إنقاص قيمتها ويُفصَل بين كل زوجين من القيم بفراغ.- الكلمة المحجوزة
none
.
<custom-ident>
اسم العدّاد الذي نريد زيادة أو إنقاص قيمته.
<integer>
القيمة التي ستُضاف إلى العداد، والقيمة الافتراضية هي 1
.
none
لا يجب زيادة أيّ عداد، وتُستخدَم هذه القيمة كقيمة افتراضية، أو لإلغاء زيادة أو إنقاص العدادات إذا كانت درجة تحديد القاعدة أكبر.
البنية الرسمية
counter-increment: [ <custom-ident> <integer>? ]+ | none
انظر أيضًا
- صفحة الخاصية
counter-reset
التي تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة.
مصادر ومواصفات
- مسودة CSS Lists and Counters Module Level 3.
- مواصفة CSS Level 2 (Revision 1).