이번에는 CSS의 Counters 속성에 대해 자세히 설명하겠습니다. CSS의 Counters 속성을 사용할 때 주의할 점은 무엇인가요? 실제 사례를 살펴보겠습니다. counter-reset: 이 값은 필수입니다. 주로 범위를 식별하는 데 사용되는 선택기에서 사용해야 하며 해당 값은 사용자 정의할 수 있습니다.
counter-increment: 카운터와 관련된 범위를 식별하는 데 사용됩니다.content:
:before
, :after 또는 ::before, ::after의 속성인 콘텐츠를 생성하는 데 사용됩니다. 카운터 내용을 생성할 때 주로 counter()와 함께 사용됩니다. counter(): 이 함수는 삽입 카운터의 값을 설정하는 데 사용됩니다. :before, :after 또는 ::before, ::after: 카운터 콘텐츠를 생성하기 위해 콘텐츠와 함께 사용됩니다.
mdn 예:
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>counters()函数_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /><style>ol { margin: 0; padding: 0 0 0 2em; list-style: none; counter-reset: item;
}li:before { counter-increment: item; content: counters(item, "."); color: #f00;
}</style></head><body><ol class="test">
<li>Node <ol>
<li>Node <ol>
<li>Node</li>
<li>Node</li>
<li>Node</li>
</ol>
</li>
<li>Node</li>
</ol>
</li>
<li>Node</li>
<li>Node</li></ol></body></html>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
관련 읽기:
위 내용은 CSS의 Counters 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
