طريقة استخدام خاصية counter-resetCSS و مثال

يستخدم خاصية counter-resetCSS مع خاصية counter-increment لإنشاء معادلة متزايدة تلقائيًا، وعرض القيمة المولدة باستخدام خاصية content.

الجدول أدناه يوضح استخدام هذا الخصائص و سجله التاريخي بالإضافة إلى لغة الجافاسكربت الخاصة بكيفية استخدام هذا الخصائص.

لغة استخدام counter-reset

لغة هذا الخصائص هي:

counter-reset: [ identifier integer ] 1 أو أكثر أزواج | none | initial | inherit

مثال أدناه يوضح كيفية استخدام خاصية counter-reset.

　　body {
　　　counter-reset: section;
　　}
　　h1 {
　　　counter-reset: category;
　　}
　　h1:before {
　　　counter-increment: section;
　　　content: "Section " counter(section) ". ";　　　　　
　　}
　　h2:before {
　　　counter-increment: category;
　　　content: counter(section) "." counter(category) " ";
　　}

قيمة الخاصية

جدول أدناه يصف قيمة هذه الخاصية.

توافق المتصفح

متاح للبrowsers التي تدعم خاصية counter-reset، والأرقام في الجدول التالي تعكس إصدار الأحدث الذي يدعم هذه الخاصية؛ يدعم جميع المتصفحات الرئيسية هذه الخاصية.

قراءة متقدمة

يرجى الرجوع إلى الدروس التالية:عناصر وهمية CSS。

خصائص ذات صلة:content،counter-increment。