counter-increment ဂုဏ်သတ္တိ
counter-increment ဂုဏ်သတ္တိသည် အကြောင်းအရာများကို အလိုအလျောက် နံပါတ်တပ်ပေးပါသည်၊
ဥပမာ အနှစ်ချုပ်များ သို့မဟုတ် ခေါင်းစဉ်များ။ ၎င်းကို counter-reset ဂုဏ်သတ္တိ၊
after နှင့်
before ရှေ့နောက်အကြောင်းအရာများ၊
content ဂုဏ်သတ္တိ (အတွင်း၌ counter လုပ်ဆောင်ချက်ကို အသုံးပြုထားသော)
တို့နှင့် ပေါင်းစပ်၍ အသုံးပြုပါသည်။
ပိုမိုနားလည်ရန်အတွက် နမူနာများကို ကြည့်ရှုရန် အကြံပြုပါသည်။
စာကြောင်းဖွဲ့စည်းပုံ
ရွေးချယ်သူ {
counter-increment: အမည် [အဆင့်] | none;
}
တန်ဖိုးများ
| တန်ဖိုး | ရှင်းလင်းချက် |
|---|---|
| အမည် | ကောင်တာ၏ အမည်။ သာမန်စကားလုံး (class သို့မဟုတ် id အမည်ကဲ့သို့)။ အမည်များစွာကို နေရာလပ်ဖြင့် ခြားပြီး သတ်မှတ်နိုင်သည်။ ဤအခြေအနေတွင် ကောင်တာများစွာ တစ်ပြိုင်နက် ပြောင်းလဲသွားမည်။ |
| အဆင့် | အပြုသဘော သို့မဟုတ် အပျက်သဘောကိန်းပြည့်အရေအတွက်။ မဖြစ်မနေသတ်မှတ်ရန်မလိုသော သတ်မှတ်ချက်။ |
none |
လက်ရှိရွေးချယ်သူအတွက် ကောင်တာ တိုးပွားခြင်းကို တားမြစ်သည်။ |
စံထားရာတန်ဖိုး: none။
နမူနာ
အနှစ်ချုပ်များကို အလိုအလျောက် နံပါတ်တပ်ပေးပါစို့:
<div id="parent">
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test;
content: counter(test);
}
:
နမူနာ
နံပါတ်တပ်ခြင်းအပြင် အခြားစာသားတစ်ခုခုကိုပါ ထည့်သွင်းကြည့်ပါစို့။
ကျွန်ုပ်တို့၏နမူနာတွင် ဂဏန်းမတိုင်မီ № နှင့်
ပြီးနောက်တွင် ပုဒ်ဖြတ်သင်္ကေတ:
<div id="parent">
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test;
content: "№" counter(test) ".";
}
:
နမူနာ
နံပါတ်တပ်ခြင်းကို 10 မှ စတင်ပါစို့။ ဤသို့ပြုလုပ်ရန်
ကောင်တာ၏ ကနဦးတန်ဖိုးကို ကိုး (ကျွန်ုပ်တို့လိုအပ်သည်ထက်
1 နည်းသော) အဖြစ် သတ်မှတ်ပါမည်:
<div id="parent">
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
</div>
#parent {
counter-reset: test 9;
}
#parent p::before {
counter-increment: test;
content: "№" counter(test) ".";
}
:
နမူနာ
နံပါတ်တပ်ခြင်းကို "2" စီတက်နှုန်းဖြင့် ဖြစ်စေပါစို့။
ဤသို့ပြုလုပ်ရန် စီတက်နှုန်းအဖြစ် နှစ်ကို သတ်မှတ်ပါမည်:
<div id="parent">
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test 2; /* နှစ်ကို သတ်မှတ်သည် */
content: "№" counter(test) ".";
}
:
နမူနာ
ယခင်နမူနာတွင် နံပါတ်တပ်ခြင်းသည် နှစ်မှ စတင်ခဲ့သည်၊
သို့သော် ကျွန်ုပ်တို့သည် တစ်မှ စတင်လိုပါသည်။ အဘယ်ကြောင့်
ထိုသို့ဖြစ်ရသနည်း။ အကြောင်းမှာ counter-reset
သည် ကောင်တာ၏တန်ဖိုးကို သုညသို့ ပြန်လည်သတ်မှတ်ပေးပြီး၊
ထို့နောက် counter-increment သည် ၎င်း၏စီတက်နှုန်းကို ပေါင်းထည့်သောကြောင့်ဖြစ်သည်:
စံထားရာအားဖြင့် တစ်ဖြစ်၍ ယခင်က ကျွန်ုပ်တို့၏
နံပါတ်တပ်ခြင်းသည် 1 မှ စတင်ခဲ့သည်။ ယခုတွင်မူ
နှစ်ကို ပေါင်းထည့်လိုက်သောကြောင့် နံပါတ်တပ်ခြင်းသည် နှစ်မှ စတင်သွားခြင်းဖြစ်သည်။
ပြဿနာကို ဖြေရှင်းရန် ကောင်တာ၏ ကနဦးတန်ဖိုးကို -1 အဖြစ် သတ်မှတ်ပါမည်။ ယခုအခါ
နံပါတ်တပ်ခြင်းသည် 1 မှ စတင်ပြီး
2 တိုးပွားသွားမည်:
<div id="parent">
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
<p>စာသား</p>
</div>
#parent {
counter-reset: test -1;
}
p::before {
counter-increment: test 2;
content: "№" counter(test) ".";
}
:
ဆက်လက်ကြည့်ရှုရန်
-
counter-resetဂုဏ်သတ္တိ,
အရာသည် ကောင်တာ၏တန်ဖိုးကို သုညသို့ ပြန်လည်သတ်မှတ်ပေးသည်