خاصية إعادة تعيين عداد 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-reset
الخاصية بإنشاء أو إعادة تعيين عدادات CSS واحدة أو أكثر.
تُستخدم counter-reset
الخاصية عادةً مع
خاصية الزيادة العكسية وخاصية
المحتوى .
القيمة الافتراضية: | لا أحد |
---|---|
وارث: | رقم |
متحرك: | رقم. اقرأ عن animatable |
الإصدار: | CSS2 |
بناء جملة JavaScript: | الكائن .style.counterReset = "section" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
بنية CSS
counter-reset: none|name number|initial|inherit;
قيم الملكية
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number 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: خاصية counterReset