စက်တင်စက်လုံးစား counter-set

အသုံးချက် နှင့် အပြုအရေး

counter-set ဗီဇ သုံးသည်း လုံးဖော် ဖန်တီးပြီး လုံးဖော် ကို အမှတ်ပြုပါ:

counter-set ဗီဇ သုံးသည်း လုံးဖော်-increment ဗီဇ နှင့် content ဗီဇ နှင့် အသုံးပြုပါ:

အမှတ်

အကျိုးသတ် 1

လုံးဖော် တစ်ခု ဖန်တီးပါ ("my-counter"), 5 အစားပြုပြီး <h2> ရှာဖွေစုံက်အား ဖြစ်ပါက 1 တိုးပါ:

body {
  /* "my-counter" ကို 5 အစားပြု */
  counter-set: my-counter 5;
}
h2::before {
  /* 将 "my-counter" 增加 1 */
  counter-increment: my-counter;
  content: "လုံးဖော် " counter(my-counter) ". ";
}

亲自试一试

အကျိုးသတ် 2

လုံးဖော် တစ်ခု ဖန်တီးပါ ("my-counter"), 5 အစားပြုပြီး <h2> ရှာဖွေစုံက်အား ဖြစ်ပါက 1 ကျဆင်းပါ:

body {
  /* "my-counter" ကို 5 အစားပြု */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" ကို 1 ကျဆင်း */
  counter-increment: my-counter -1;
  content: "လုံးဖော် " counter(my-counter) ". ";
}

亲自试一试

အကျိုးသတ် 3

လုံးဖော် အချက်အလက်: "လုံးဖော် 10:"、"10.1"、"10.2" စသည့် ပုံစံဖြင့် လုံးဖော် နှင့် လုံးဖော် အသုံးပြုပါ:

body {
  /* "လုံးဖော်" ကို 9 အစားပြု */
  counter-set: လုံးဖော် 9;
}
h1 {
  /* 将 "subsection" 设置为 0 */
  counter-set: subsection 0;
}
h1::before {
  /* 将 "section" 增加 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* 将 "subsection" 增加 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

亲自试一试

例子 4

创建一个计数器，将其设置为 9，并在每次出现

选择器时将其增加 1（使用罗马数字）：

body {
  /* 将 "my-counter" 设置为 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* 将 "my-counter" 增加 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

亲自试一试

CSS 语法

counter-set: none|counter-name number|initial|inherit;

属性值

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

လုပ်ကိုင် စာကြိုး

လျှက်ချက်::before အကွက် ပုံစံအဖွဲ့

လျှက်ချက်::after အကွက် ပုံစံအဖွဲ့

လျှက်ချက်စက်တင်စက်လုံးစား content

လျှက်ချက်စက်တင်စက်လုံးစား counter-increment

လျှက်ချက်စက်လုံးအကြောင်း counter() အကိုးအချုပ်