CSS counter-increment ÊôÐÔ

ʵÀý

¶Ô²¿·ÖºÍ×Ó²¿·Ö½øÐбàºÅ£¨±ÈÈç "Section 1"¡¢"1.1"¡¢"1.2"£©µÄ·½·¨£º

body
  {
  counter-reset:section;
  }

h1
  {
  counter-reset:subsection;
  }

h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }

h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
  }

Ç××ÔÊÔÒ»ÊÔ

ä¯ÀÀÆ÷Ö§³Ö

IE Firefox Chrome Safari Opera

ËùÓÐä¯ÀÀÆ÷¶¼Ö§³Ö counter-increment ÊôÐÔ¡£

×¢ÊÍ£ºÈç¹ûÒѹ涨 !DOCTYPE£¬ÄÇô Internet Explorer 8 £¨ÒÔ¼°¸ü¸ß°æ±¾£©Ö§³Ö counter-increment ÊôÐÔ¡£

¶¨ÒåºÍÓ÷¨

counter-increment ÊôÐÔÉèÖÃij¸öѡȡÆ÷ÿ´Î³öÏֵļÆÊýÆ÷ÔöÁ¿¡£Ä¬ÈÏÔöÁ¿ÊÇ 1¡£

˵Ã÷

ÀûÓÃÕâ¸öÊôÐÔ£¬¼ÆÊýÆ÷¿ÉÒÔµÝÔö£¨»òµÝ¼õ£©Ä³¸öÖµ£¬Õâ¿ÉÒÔÊÇÕýÖµ»ò¸ºÖµ¡£Èç¹ûûÓÐÌṩ number Öµ£¬ÔòĬÈÏΪ 1¡£

×¢ÊÍ£ºÈç¹ûʹÓÃÁË "display: none"£¬ÔòÎÞ·¨Ôö¼Ó¼ÆÊý¡£ÈçʹÓà "visibility: hidden"£¬Ôò¿ÉÔö¼Ó¼ÆÊý¡£

ĬÈÏÖµ£º none
¼Ì³ÐÐÔ£º no
°æ±¾£º CSS2
JavaScript Óï·¨£º object.style.counterIncrement="subsection"

¿ÉÄܵÄÖµ

Öµ ÃèÊö
none ĬÈÏ¡£Ñ¡ÔñÆ÷ÎÞ¼ÆÊýÆ÷ÔöÁ¿¡£
id number

id ¶¨Ò彫Ôö¼Ó¼ÆÊýµÄÑ¡ÔñÆ÷¡¢id »ò class¡£

number ¶¨ÒåÔöÁ¿¡£number ¿ÉÒÔÊÇÕýÊý¡¢Áã»òÕ߸ºÊý¡£

inherit ¹æ¶¨Ó¦¸Ã´Ó¸¸ÔªËؼ̳Рcounter-increment ÊôÐÔµÄÖµ¡£

Ïà¹ØÒ³Ãæ

CSS ²Î¿¼Êֲ᣺CSS :before Î±ÔªËØ

CSS ²Î¿¼Êֲ᣺CSS :after Î±ÔªËØ

CSS ²Î¿¼Êֲ᣺content ÊôÐÔ

CSS ²Î¿¼Êֲ᣺counter-reset ÊôÐÔ

VUE