خاصية الزيادة العكسية في CSS
مثال
أنشئ عدادًا ("my-sec-counter") وقم بزيادته بواحد لكل تكرار من محدد <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تزيد الخاصية أو تنقص من قيمة counter-increment
واحد أو أكثر من عدادات CSS.
تُستخدم counter-increment
الخاصية عادةً مع
خاصية إعادة التعيين العداد وخاصية
المحتوى .
القيمة الافتراضية: | لا أحد |
---|---|
وارث: | رقم |
متحرك: | رقم. اقرأ عن animatable |
الإصدار: | CSS2 |
بناء جملة JavaScript: | الكائن .style.counterIncrement = "القسم الفرعي" ؛ |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
بنية CSS
counter-increment: none|id|initial|inherit;
قيم الملكية
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
أنشئ عدادًا ("my-sec-counter") وقم بتقليله بواحد لكل تكرار من محدد <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
مثال
ترقيم الأقسام والأقسام الفرعية باستخدام "القسم 1:" ، "1.1" ، "1.2" ، إلخ:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
مثال
أنشئ عدادًا وزدّه بمقدار واحد (باستخدام الأرقام الرومانية) لكل تواجد لمحدد <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
الصفحات ذات الصلة
مرجع CSS: :: قبل العنصر الزائف
مرجع CSS: :: بعد العنصر الزائف
مرجع CSS: خاصية المحتوى
مرجع CSS: خاصية إعادة التعيين العداد
وظائف CSS: وظيفة العداد ()
مرجع DOM HTML: خاصية counterIncrement