counters()

åºçº¿ å¹¿æ³å¯ç¨

css

/* Simple usage  - style defaults to decimal */
counters(countername, '-');

/* changing the counter display */
counters(countername, '.', upper-roman)

å¨ä½¿ç¨æ¤åè½ä¹åï¼è¯·ä»ç»æ£æ¥æµè§å¨å¼å®¹æ§è¡¨ ã

è¯æ³

Values

<custom-ident> èªå®ä¹æ è¯: ä¸ä¸ªæ è¯è®¡æ°å¨çåç§°ï¼åºåå¤§å°åï¼å¹¶ä¸ä¸counter-resetåcounter-incrementä¸çâåç§°âç¸åãåç§°ä¸è½ä»¥ä¸¤ä¸ªç ´æå·å¼å¤´ï¼å¹¶ä¸ä¸è½ä¸ºnone, unset, initial, æ inheritã
<counter-style> è®¡æ°å¨æ ·å¼: è®¡æ°å¨æ ·å¼åç§°æ symbols() å½æ°ï¼å¶ä¸è®¡æ°å¨æ ·å¼åç§°æ¯æ°åï¼åæ¯æç¬¦å·çç®åé¢å®ä¹è®¡æ°å¨æ ·å¼ï¼å¤æçä¸äºæåå¡ä¿æ¯äºé¿æé¢å®ä¹è®¡æ°å¨æ ·å¼ï¼æå¶ä»é¢å®ä¹è®¡æ°å¨æ ·å¼ãå¦æçç¥ï¼åè®¡æ°å¨æ ·å¼é»è®¤ä¸ºåè¿å¶ã
<string> åç¬¦ä¸²: ä»»ææ°éçææ¬åç¬¦ãéæä¸åç¬¦å¿é¡»ä½¿ç¨å¶ Unicode è½¬ä¹åºåè¿è¡ç¼ç ï¼ä¾å¦ï¼\ 000A9è¡¨ç¤ºçæç¬¦å·ã

å½¢å¼è¯æ³

counters( <custom-ident>, <string>, <counter-style>? )

where
<counter-style> = <counter-style-name> | symbols()

where
<counter-style-name> = <custom-ident>

ç¤ºä¾

default value compared to upper Roman

HTML

html

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

css

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content: counters(listCounter, ".") " == "
    counters(listCounter, ".", lower-roman);
}

ç»æ

decimal-leading-zero compared to lower-alpha

HTML

html

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

css

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content: counters(count, ".", upper-alpha) ") ";
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == "
    counters(count, ".", lower-alpha);
}