توابع counter() CSS

تعریف و استفاده

counter() این تابع مقدار فعلی شمارنده مشخص شده را به صورت رشته‌ای بازمی‌گرداند.

مثال

مثال 1

شمارنده برای صفحه ایجاد کنید (در انتخابگر body). مقدار شمارنده را به هر عنصر <h2> اضافه کنید و متن "بخش چند" را در ابتدای هر عنصر <h2> قرار دهید:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "بخش " counter(section) ": ";
}

آزمایش کنید

مثال 2

سبک شمارنده را تنظیم کنید:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "بخش " counter(section, upper-roman) ": ";
}

آزمایش کنید

قوانین CSS

counter(countername, counterstyle)
مقدار توضیح
countername

ضروری. نام شمارنده (همان نامی که در ویژگی‌های counter-reset و counter-increment استفاده می‌شود)

توجه داشته باشید که نام‌ها از نظر بزرگ و کوچک تفاوت دارند.
counterstyle

اختیاری. سبک شمارنده (می‌تواند مقدار list-style-type باشد، نام @counter-style یا نمادهای function() )

مقدار پیش‌فرض دهی است.

جزئیات فنی

ورژن: CSS3

پردازنده‌ی اینترنت

کروم ایج فایرفاکس سافاری آپرا
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

مربوط صفحات

تعلیم:CSS کاؤنٹر

مطالبه:CSS کنٹینٹ پراپرٹی

مطالبه:CSS کاؤنٹر انکریمنت پراپرٹی

مطالبه:CSS کاؤنٹر ری سیٹ پراپرٹی

مطالبه:CSS @counter-style قوانین

مطالبه:CSS counters() فنکشن