Wir wissen, dass die Pseudoklassen „:before“ und „:after“ in CSS3 vorkommen. Deshalb werden wir Ihnen heute die Schritte zum Implementieren des Inhaltsattributs von CSS3 beibringen. Das Folgende ist ein Fall, schauen wir uns das an es zusammen.
Die Pseudoklassen „:before“ und „:after“ erschienen in CSS3
Sie können so schreiben:
h1:after{ content:'h1后插入的文本'; ...}
Die Funktionen und Die Auswirkungen dieser beiden Selektoren werden hier nicht vorgestellt. Ich werde hauptsächlich auf den oben erwähnten CSS-Attributinhalt eingehen, der mit den Pseudoelementen :after und :before verwendet wird, um Inhalte vor oder nach dem Objekt < anzuzeigen 🎜>
Der Wert des Inhalts:.
normal: verhält sich genauso wie kein Wert. kein: generiert keinen Wert.list-style-type): Benannte Zähler verwenden und das angegebene list-style-type-Attribut
counters(name,string) einhalten ): Alle benannten Zähler verwendencounters(name, string, list-style-type): Alle benannten Zähler verwenden und das angegebene list-style-type-Attribut einhalten no-close- quote: Fügt das quotes-Attribut nicht nach dem Tag ein, sondern erhöht dessen Verschachtelungsebene no-open-quote: Fügt das quotes-Attribut des Front-Tags nicht ein, verringert jedoch dessen Verschachtelungsebene close-quote: Fügt das Zitat-Attribut ein open-quote: Fügt das Vorzeichen des quotes-Attributs ein Die hier schwer verständlichen Werte sind: counter (Name); Das Folgende ist eine Zusammenfassung. In diesem Abschnitt wird am Ende eine Demo jedes Werts gegeben, Zum Beispiel habe ich die folgende HTML-Struktur:
Ich möchte nach jedem Li den aktuellen Li-Indexwert hinzufügen:
<ul> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li></ul>
Erklärung:
ul li{ counter-increment:index; } ul li:after{ content:'统计:'counter(index); display:block; line-height:35px; }
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS content</title><meta name="author" content="phpstudy.net"><meta name="copyright" content="www.phpstudy.net"><style> .string p:after { margin-left: -16px; background: #fff; content: "支持"; color: #f00;} .attr p:after { content: attr(title);} .url p:before { content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png); display: block;} .test ol { margin: 16px 0; padding: 0; list-style: none;} .counter1 li { counter-increment: testname;} .counter1 li:before { content: counter(testname)":"; color: #f00; font-family: georgia,serif,sans-serif;} .counter2 li { counter-increment: testname2;} .counter2 li:before { content: counter(testname2,lower-roman)":"; color: #f00; font-family: georgia,serif,sans-serif;} .counter3 ol ol { margin: 0 0 0 28px;} .counter3 li { padding: 2px 0; counter-increment: testname3;} .counter3 li:before { content: counter(testname3,float)":"; color: #f00; font-family: georgia,serif,sans-serif;} .counter3 li li { counter-increment: testname4;} .counter3 li li:before { content: counter(testname3,decimal)"."counter(testname4,decimal)":";} .counter3 li li li { counter-increment: testname5;} .counter3 li li li:before { content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";}</style></head><body><ul> <li> <strong>string:</strong> <p>你的浏览器是否支持content属性:否</p> </li> <li> <strong>attr:</strong> <p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p> </li> <li> <strong>url():</strong> <p>如果你看到我的头像图片则说明你目前使用的浏览器支持content属性</p> </li> <li> <strong>counter(name):</strong> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </li> <li> <strong>counter(name,list-style-type):</strong> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </li> <li> <strong>counter(name)拓展应用:</strong> <ol> <li>列表项 <ol> <li>列表项 <ol> <li>列表项</li> <li>列表项</li> </ol> </li> <li>列表项</li> </ol> </li> <li>列表项 <ol> <li>列表项</li> <li>列表项</li> </ol> </li> <li>列表项 <ol> <li>列表项</li> <li>列表项</li> </ol> </li> </ol> </li></ul></body></html>
Verwandte Lektüre:
Detaillierte Einführung von CSS3 zum Übersetzungsattribut
Detaillierte Einführung von CSS3 zum Hintergrundgrößenattribut
Schritte zum Implementieren des rotierenden Halo-Effekts mit CSS3
Das obige ist der detaillierte Inhalt vonSchritte zur Implementierung von CSS3-Inhaltsattributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!