Eine detaillierte Einführung in das Inhaltsattribut von CSS3

Es gibt vier Haupt-Pseudoelemente in CSS: before/after/first-letter/first-line Im Vorher/Nachher-Pseudo--Elementselektor gibt es ein Content-Attribute können verwendet werden, um Inhalte in die Seite einzufügen.

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, einzelne Zeichen usw. auf beiden Seiten hinzuzufügen der Zeichenfolge Verschachtelte Textsymbole wie Anführungszeichen und doppelte Anführungszeichen. 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)'.';
}
h1{
    counter-increment:my;
}

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

Änderung der Projektnummer

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

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

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

Nummerierungstyp angeben

Verwenden Sie die Syntax des Inhaltsformats (Zählername, Nummerierungstyp), um den Nummerierungstyp anzugeben. Die Referenz des Nummerierungstyps kann auf der Liste basieren -style-Typ-Attributwert 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)'.';
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)'.';
    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 Attribut counter-reset verwenden, um es zurückzusetzen, und das CSS des obigen h1 ändern:

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

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

Sie können auch komplexere Verschachtelungen erreichen, 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)'.';
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) '-' counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) '-' counter(h2) '-' counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in das Inhaltsattribut von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!