집 >웹 프론트엔드 >JS 튜토리얼 >CSS의 Counters 속성에 대한 자세한 설명

CSS의 Counters 속성에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-09 13:30:212303검색

이번에는 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!