باستخدام عدادات CSS
عدادات CSS تشبه "المتغيرات". ويمكن زيادة قيم المتغيرات قواعد CSS (والتي سوف تتبع عدد المرات التي يتم استخدامها).
للعمل مع عدادات CSS سوف نستخدم الخصائص التالية:
-
counter-reset- يخلق أو إعادة تعيين عداد -
counter-increment- الزيادات في قيمة العداد -
content- ولدت إدراج المحتوى -
counter()أوcounters()وظيفة - ويضيف قيمة عداد لعنصر
لاستخدام عداد CSS، لا بد أولا أن تنشأ مع counter-reset .
المثال التالي بإنشاء مضادة للصفحة (في محدد الجسم)، ثم زيادات قيمة العداد لكل <h2> عنصر ويضيف "Section < value of the counter >:" لبداية كل <h2> العنصر:
مثال
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
انها محاولة لنفسك » عدادات التعشيش
المثال التالي يخلق واحدة مضادة للصفحة (قسم) ومكافحة واحد لكل <h1> عنصر (الفرعي). في "section" سوف يحسب العداد لكل <h1> عنصر مع "Section < value of the section counter >." ، و "subsection" سوف يحسب العداد لكل <h2> العنصر مع "< value of the section counter >.< value of the subsection counter >" :
مثال
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
} انها محاولة لنفسك » يمكن عداد أيضا أن تكون مفيدة لجعل القوائم المذكورة لأنه يتم إنشاء مثيل جديد من عداد تلقائيا في العناصر التابعة. نحن هنا استخدام counters() تعمل على إدراج سلسلة بين مستويات مختلفة من عدادات المتداخلة:
مثال
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} انها محاولة لنفسك » خصائص مضادة CSS
| الملكية | وصف |
|---|---|
| content | استخدامها مع :: قبل وبعد :: العناصر الزائفة، لإدراج المحتوى المقدم |
| counter-increment | زيادات واحد أو أكثر من قيم العداد |
| counter-reset | يخلق أو يعيد واحد أو أكثر من العدادات |