Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS3-Selektoren zum Einfügen erforderlicher Inhalte in die Seite. Ich hoffe, dass er für Freunde hilfreich ist.

1 Verwenden Sie einen Selektor, um Inhalte einzufügen.

Verwenden Sie den Nachher- oder Vorher-Selektor, um den Inhalt zu definieren, der in das Inhaltsattribut des Selektors eingefügt werden soll ist Text. Beim Einfügen von Text müssen Sie auf beiden Seiten des eingefügten Texts einfache oder doppelte Anführungszeichen hinzufügen.

<style type="text/css">
h2:before{  content：‘COLUMN’；}
</style>

2 Geben Sie einzelne Elemente an, die nicht eingefügt werden sollen

Verwenden Sie den Attributwert „none“ des Inhaltsattributs

<style type="text/css">
h2.sample:before{  content：none；}
</style>

3 Fügen Sie Bilddateien ein

<style type="text/css">
h2:before{  content：url(mark.png)；}
</style>

4 Zeigen Sie den Wert des Alt-Attributs als Titel des Bildes an

Durch Angabe der Form von „attr (Attributname)“ im Inhaltsattribut, Sie können die Attributwerte jedes Attributs anzeigen.

img:after{
content:attr(alt);
display:block;
text-align:center;
}

5 Verwenden Sie das Inhaltsattribut, um Artikelnummern einzufügen

(1) Fügen Sie fortlaufende Nummern vor mehreren Titeln hinzu

1 Im Inhaltsattribut Verwenden der Zählerattributwert, um aufeinanderfolgende Zahlen an mehrere Elemente anzuhängen

: before{ content: counter (counter name);} (Verwenden Sie einen Zähler, um die Zahl zu berechnen, und der Zähler kann beliebig benannt werden)

2. Sie müssen auch die Spezifikation des Counter-Inkrement-Attributs des Elements hinzufügen. Um eine fortlaufende Nummerierung zu verwenden, müssen Sie den Attributwert des Counter-Inkrement-Attributs auf setzen der Vor- oder Nach-Selektor. Der im Zählerattributwert angegebene Zählername.

{ Zählerinkrement: der im Vor- oder Nach-Selektor angegebene Zählername}

h1：before｛content：counter（mycounter）；｝
h1｛counter-increment：mycounter；｝//1、2、3.......

(2) Fügen Sie den Text

h1：before｛content：‘第’counter（mycounter）‘章’；｝//第1章大标题、第2章大标题.........

h1：before｛content：counter（mycounter，upper-alpha）‘.’；｝// A.、B.、C.、

h1：before｛content：counter（mycounter）；｝//1（1、2、3...）、2（1、2、3...）、........
h1｛counter-increment：mycounter；counter-reset:subcounter;｝(将中编号进行重置)
h2：before｛content：counter（subcounter）；｝
h2｛counter-increment：subcounter；margin-left:40px｝

Nach dem Login kopieren

h2：before｛content：counter（mycounter）‘-’ counter（subcounter）‘.’；｝//1-1、1-2

Nach dem Login kopieren

h1:before{  content:open-quote; }
h1:after { content:close-quote; }
h1{   quotes:"(" ")"   }//形如:   （标题）

CSS3 Series 1 (Übersicht , Auswahl, Selektoren zum Einfügen von Inhalten verwenden)_html/css_WEB-ITnose

So fügen Sie Inhalte in die Seite in CSS3 ein

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Selektoren, um erforderlichen Inhalt in die Seite in CSS3 einzufügen (Code angehängt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!