Detaillierte Erläuterung des Inhaltsattributs in CSS3

Es gibt vier Hauptpseudoelemente in CSS: Vorher/Nachher/Anfangsbuchstabe/Erste Zeile Im Vorher/Nachher-Pseudoelementselektor gibt es ein Inhaltsattribut, das Inhalte in die Seite einfügen kann.

Einfachen Text einfügen

Inhalt: „Eingefügter Artikel“ oder Inhalt:none fügt keinen Inhalt ein

#html
<h1>这是h1</h1>
<h2>这是h2</h2>

#css
h1::after{
    content:"h1后插入内容"
}
h2::after{
    content:none
}

Laufendes Ergebnis: https://jsfiddle.net/ dwqs/Lmm1r08x/

Eingebettete Textsymbole

Sie können den Attributwert für offene Anführungszeichen und den Attributwert für geschlossene Anführungszeichen des Inhaltsattributs verwenden, um Klammern, einfache Anführungszeichen, doppelte Anführungszeichen usw. hinzuzufügen. auf beiden Seiten der Zeichenfolge. Open-Quote wird verwendet, um das Starttextsymbol hinzuzufügen, und Close-Quote wird verwendet, um das Endtextsymbol hinzuzufügen. Ändern Sie das obige CSS:

h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

Ergebnis ausführen: https://jsfiddle.net/dwqs/p8e3qvv4/

Bild einfügen

Das Inhaltsattribut kann auch direkt sein auf dem Element platziert Bilder davor/nachher einfügen

#html
<h3>这是h3</h3>

#css
h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

Ergebnisse ausführen: https://jsfiddle.net/dwqs/c6qk6pkv/

Attributwert des Elements einfügen

Das Inhaltsattribut kann direkt sein. Verwenden Sie attr, um das Attribut des Elements abzurufen und an der entsprechenden Position einzufügen.

#html
<a href="http:///www.ido321.com">这是链接</a>

#css
a:after{
    content:attr(href);
}

Ergebnisse ausführen: https://jsfiddle.net/dwqs/m220nzan/

Artikelnummer einfügen

Verwenden Sie das Zählerattribut des Inhalts, um aufeinanderfolgende Elemente anzuhängen Anzahl mehrerer Elemente.

#html
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>
<h1>大标题</h1>
<p>文字</p>

#css
h1:before{
    content:counter(my)&#39;.&#39;;
}
h1{
    counter-increment:my;
}

Laufendes Ergebnis: https://jsfiddle.net/dwqs/2ueLg3uj/

Änderung der Projektnummer

Die standardmäßig eingefügte Projektnummer ist numerisch. ,1,2,3.. . . Automatisch erhöhen, Sie können der Projektnummer auch Text und Stile hinzufügen. Verwenden Sie weiterhin die oben genannten HTML- und CSS-Änderungen wie folgt:

h1:before{
    content:'第'counter(my)'章';
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

Laufergebnisse: https://jsfiddle.net/dwqs/17hqznca/

Geben Sie den Nummerierungstyp an

Verwenden Sie die Syntax des Inhaltsformats (Zählername, Nummerierungstyp), um den Nummerierungstyp anzugeben. Die Referenz des Nummerierungstyps kann auf dem Listenstil basieren. Typattributwert von ul. Unter Verwendung des obigen HTML wird das CSS wie folgt geändert:

h1:before{
    content:counter(my,upper-alpha);
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

Laufende Ergebnisse: https://jsfiddle.net/dwqs/4nsrtxup/

Zahlenverschachtelung

Große Zahlen Mittlere Zahlen sind in mittleren Zahlen verschachtelt und kleine Zahlen sind in mittleren Zahlen verschachtelt.

#html
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1>大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>

#css
h1::before{
    content:counter(h)&#39;.&#39;;
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)&#39;.&#39;;
    margin-left:40px;
}
p{
    counter-increment:p;
}

Laufendes Ergebnis: https://jsfiddle.net/dwqs/2k5qbz51/

In der Ausgabe des Beispiels ist zu erkennen, dass die Zahlen von p fortlaufend sind. Wenn Sie die drei Ps nach jedem h1 neu nummerieren, können Sie das Counter-Reset-Attribut verwenden, um es zurückzusetzen und das CSS des obigen h1 zu ändern:

h1{
    counter-increment:h;
    counter-reset:p;
}

Auf diese Weise wird die Nummerierung zurückgesetzt Schauen Sie sich das Ergebnis an: https://jsfiddle.net/dwqs/hfutu4Lq/

Sie können auch komplexere Verschachtelungen implementieren, beispielsweise eine dreistufige Verschachtelung.

#html
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>

#css
h1::before{
    content:counter(h1)&#39;.&#39;;
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) &#39;-&#39; counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) &#39;-&#39; counter(h2) &#39;-&#39; counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;
}

Laufergebnisse: https://jsfiddle.net/dwqs/wuuckquy/

Zhang Dada hat einen Artikel über die Verwendung von Zählern zum Implementieren von Zählungen: kleiner Tipp: CSS-Zähler + Pseudoklasse Implementierung Numerische dynamische Berechnung und Präsentation

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Inhaltsattributs in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!