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!
