خصائص counter-set لـ CSS

التعريف والاستخدام

counter-set العنصر يُستخدم لإنشاء وتعيين معدة عداد CSS إلى قيمة معينة

counter-set العناصر تستخدم عادة مع خاصية counter-increment و خاصية content

مثال

مثال 1

إنشاء معدة عداد ("my-counter")،اجعلها 5، وزيادة 1 في كل مرة يظهر <h2> المظهر

إنشاء معادلة العد، تعيينها على 9، وزيادة القيمة 1 في كل مرة يتم استدعاء مبدأ <h2> (استخدام الرموز الرومانية):
  /* 将 "my-counter" 设置为 5 */
  counter-set: my-counter 5;
content: counter(my-counter, upper-roman) ". ";
counter-set: my-counter 9;
  h2::before {
  /* زيادة "my-counter" بـ 1 */
  content: "Section " counter(my-counter) ". ";
content: counter(my-counter, upper-roman) ". ";

}

مثال 2

إنشاء معدة عداد ("my-counter")،اجعلها 5،وخفضها 1 في كل مرة يظهر <h2> المظهر

إنشاء معادلة العد، تعيينها على 9، وزيادة القيمة 1 في كل مرة يتم استدعاء مبدأ <h2> (استخدام الرموز الرومانية):
  /* 将 "my-counter" 设置为 5 */
  counter-set: my-counter 5;
content: counter(my-counter, upper-roman) ". ";
counter-set: my-counter 9;
  /* 将 "my-counter" 减少 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
content: counter(my-counter, upper-roman) ". ";

}

مثال 3

استخدام "Section 10:"،"10.1"،"10.2"等形式 للترقيم الفصول الفرعية

إنشاء معادلة العد، تعيينها على 9، وزيادة القيمة 1 في كل مرة يتم استدعاء مبدأ <h2> (استخدام الرموز الرومانية):
  /* 将 "section" 设置为 9 */
  counter-set: section 9;
content: counter(my-counter, upper-roman) ". ";
h1 {
  h1 {
  /* تعيين "subsection" على 0 */
content: counter(my-counter, upper-roman) ". ";
counter-set: subsection 0;
  h1::before {
  /* زيادة "section" بـ 1 */
  counter-increment: section;
content: counter(my-counter, upper-roman) ". ";
counter-set: my-counter 9;
  content: "Section " counter(section) ": ";
  /* زيادة "subsection" بـ 1 */
  counter-increment: subsection;
content: counter(my-counter, upper-roman) ". ";

}

content: counter(section) "." counter(subsection) " ";

مثال 4

إنشاء معادلة العد، تعيينها على 9، وزيادة القيمة 1 في كل مرة يتم استدعاء مبدأ <h2> (استخدام الرموز الرومانية):
  body {
  /* تعيين "my-counter" على 9 */
content: counter(my-counter, upper-roman) ". ";
counter-set: my-counter 9;
  h2::before {
  /* زيادة "my-counter" بـ 1 */
  counter-increment: my-counter;
content: counter(my-counter, upper-roman) ". ";

}

تجربة شخصية

نص CSSالقيمة الافتراضية. لا يتم تعيين معادلة العد.counter-set: لا شيء|

|القيمة الافتراضية|وراثة;

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية.

الصفحات ذات الصلة

المرجع:الصيغة المزيفة ::before

المرجع:الصيغة المزيفة ::after

المرجع:خصائص content لـ CSS

المرجع:خصائص counter-increment لـ CSS

المرجع:دالة counter() CSS