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) ". ";
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် counter-reset
တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော CSS ကောင်တာများကို ဖန်တီး သို့မဟုတ် ပြန်လည်သတ်မှတ်သည်။
ပိုင်ဆိုင်မှုကို အ များအားဖြင့် တန်ပြန်တိုးနှုန်း ပိုင်ဆိုင်မှုနှင့်
အကြောင်းအရာcounter-reset
ပိုင်ဆိုင်မှု တို့နှင့် အတူတွဲသုံးသည်
။
မူလတန်ဖိုး: | မရှိ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS2 |
JavaScript syntax- | အရာဝတ္ထု .style.counterReset="section" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Syntax
counter-reset: none|name number|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number 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 ရည်ညွှန်းချက်- တန်ပြန်ပြန်လည်သတ်မှတ်ခြင်း ပိုင်ဆိုင်မှု