counter-set
åºçº¿
2023
æè¿å¯ç¨
èª December 2023 èµ·ï¼æ¤ç¹æ§å·²å¨ææ°æµè§å¨ä¸å¾å°æ¯æãä½å¨è¾æ§çè®¾å¤ææµè§å¨ä¸å¯è½æ æ³è¿è¡ã
counter-set CSS 屿§å° CSS 计æ°å¨è®¾ç½®ä¸ºç»å®å¼ãå®ä¼æä½ç°æè®¡æ°å¨çå¼ï¼å¹¶ä¸åªæå¨å
ç´ ä¸æ²¡æç»å®åç§°ç计æ°å¨æ¶æä¼å建æ°è®¡æ°å¨ã
å°è¯ä¸ä¸
counter-set: none;
counter-set: chapter-count 0;
counter-set: chapter-count;
counter-set: chapter-count 5;
counter-set: chapter-count -5;
<section class="default-example" id="default-example">
<div class="transition-all" id="chapters">
<h1>Alice's Adventures in Wonderland</h1>
<h2>Down the Rabbit-Hole</h2>
<h2 id="example-element">The Pool of Tears</h2>
<h2>A Caucus-Race and a Long Tale</h2>
<h2>The Rabbit Sends in a Little Bill</h2>
</div>
</section>
#default-example {
text-align: left;
counter-set: chapter-count;
}
#example-element {
background-color: #37077c;
color: white;
}
h2 {
counter-increment: chapter-count;
font-size: 1em;
}
h2::before {
content: "Chapter " counter(chapter-count) ": ";
}
夿³¨ï¼è®¡æ°å¨çå¼å¯ä»¥éè¿ counter-increment CSS 屿§è¿è¡é墿éåã
è¯æ³
/* å° "my-counter" 设置为 0 */
counter-set: my-counter;
/* å° "my-counter" 设置为 -1 */
counter-set: my-counter -1;
/* å° "counter1" 设置为 1ï¼å° "counter2" 设置为 4 */
counter-set: counter1 1 counter2 4;
/* åæ¶å¨ä¸å¤ªå
·ä½çè§åä¸å¯è½è®¾ç½®çä»»ä½è®¡æ°å¨ */
counter-set: none;
/* å
¨å±å¼ */
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;
counter-set 屿§å¯ä»¥æå®ä¸ºä»¥ä¸ä¹ä¸ï¼
- ä¸ä¸ªå½å计æ°å¨ç
<custom-ident>ï¼åé¢å¯è·ä¸ä¸ª<integer>ãä½ å¯ä»¥æå®è¦éç½®ç计æ°å¨æ°éï¼æ¯ä¸ªåç§°æåç§°âæ°å对ä¹é´ç¨ç©ºæ ¼åéã - å
³é®åå¼
noneã
å¼
<custom-ident>-
è¦è®¾ç½®ç计æ°å¨çåç§°ã
<integer>-
å¨å ç´ æ¯æ¬¡åºç°æ¶è®¾ç½®è®¡æ°å¨çå¼ãå¦ææªæå®ï¼åé»è®¤ä¸º
0ã妿å½åå ç´ ä¸æ²¡æç»å®åç§°ç计æ°å¨ï¼å ç´ å°å建ä¸ä¸ªç»å®åç§°çæ°è®¡æ°å¨ï¼èµ·å§å¼ä¸º 0ï¼å°½ç®¡å®å¯è½ä¼ç«å³å°è¯¥å¼è®¾ç½®æå¢å 为ä¸åçå¼ï¼ã none-
䏿§è¡è®¡æ°å¨è®¾ç½®ãè¿å¯ä»¥ç¨æ¥è¦çå¨è¾ä¸å ·ä½çè§åä¸å®ä¹ç
counter-setã
å½¢å¼å®ä¹
| åå§å¼ | none |
|---|---|
| éç¨å ç´ | ææå ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | æè®¡ç®å¼çç±»å |
å½¢å¼è¯æ³
counter-set =
[ <counter-name> <integer>? ]+ |
none
<counter-name> =
<custom-ident>
<integer> =
<number-token>
示ä¾
>设置å½å计æ°å¨
h1 {
counter-set: chapter section 1 page;
/* å°ç« èå页é¢è®¡æ°å¨è®¾ç½®ä¸º 0ï¼
å°é¨å计æ°å¨è®¾ç½®ä¸º 1 */
}
è§è
| è§è |
|---|
| CSS Lists and Counters Module Level 3> # propdef-counter-set> |
æµè§å¨å ¼å®¹æ§
åè§
- ä½¿ç¨ CSS 计æ°å¨
counter-incrementcounter-reset@counter-stylecounter()åcounters()彿°content屿§