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) ". ";
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှုသည် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော CSS ကောင်တာ များ၏ counter-increment
တန်ဖိုးကို တိုး သို့မဟုတ် လျော့စေသည်။
ပစ္စည်းကို အ များအားဖြင့် တန်ပြန်ပြန်လည်သတ်မှတ်ခြင်း ပိုင်ဆိုင်မှုနှင့်
အကြောင်းအရာcounter-increment
ပိုင်ဆိုင်မှု တို့နှင့်အတူ အသုံးပြုလေ့ရှိသည်
။
မူလတန်ဖိုး: | မရှိ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS2 |
JavaScript syntax- | အရာဝတ္ထု .style.counterIncrement = "ပုဒ်မခွဲ"; |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Syntax
counter-increment: none|id|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial 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 ရည်ညွှန်းချက်- ::pseudo ဒြပ်စင် မတိုင်မီ
CSS ရည်ညွှန်းချက်- ::ပြီးနောက် pseudo ဒြပ်စင်
CSS ရည်ညွှန်းချက်- အကြောင်းအရာ ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- တန်ပြန်ပြန်လည်သတ်မှတ်မှု ပိုင်ဆိုင်မှု
CSS လုပ်ဆောင်ချက်များ- counter() လုပ်ဆောင်ချက်
HTML DOM ရည်ညွှန်းချက်- တန်ပြန်တိုးမြှင့်မှု ပိုင်ဆိုင်မှု