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 ÊôÐÔ