Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Counters-Eigenschaft von CSS

Detaillierte Erläuterung der Counters-Eigenschaft von CSS

php中世界最好的语言Original: 2018-03-09 13:30:212241Durchsuche

Dieses Mal werde ich Ihnen das Counters-Attribut von CSS ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Counters-Attributs von CSS?

Zähler-Reset: Dieser Wert ist erforderlich. Muss in Selektoren verwendet werden, hauptsächlich zur Identifizierung des Bereichs, und sein Wert kann angepasst werden.
Zählerinkrement: Wird verwendet, um den mit dem Zähler verknüpften Bereich zu identifizieren.
Inhalt: Wird zum Generieren von Inhalten verwendet. Dies ist ein Attribut von :before, :after oder ::before, ::after. Beim Generieren von Zählerinhalten wird es hauptsächlich zusammen mit counter() verwendet.
counter(): Mit dieser Funktion wird der Wert des Einfügungszählers festgelegt.
:before, :after oder ::before, ::after: wird mit Inhalten verwendet, um Gegeninhalte zu generieren.

mdn-Beispiel:

<!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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Verwandte Lektüre:

Wie vermeide ich verstümmelte Zeichen beim Codieren von URI (URL) in JS?

Wie Front-End- und Back-End-Daten wissenschaftlich interagieren sollten

Wie man negative Margenwerte verwendet in CSS

Wie man mit häufigen Abstürzen von Chrome aufgrund von unzureichendem Speicher umgeht

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Counters-Eigenschaft von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Funktionsüberladung in JavaScriptNächster Artikel：Detaillierte Erläuterung der Funktionsüberladung in JavaScript

In Verbindung stehende Artikel

Mehr sehen