So verwenden Sie Selektoren, um erforderlichen Inhalt in die Seite in CSS3 einzufügen (Code angehängt)

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章大标题.........

< in die Artikelnummer ein 🎜> (3) Geben Sie die Art der Zahl an

1. Mit dem Inhaltsattribut des Vorher- oder Nachher-Selektors können Sie nicht nur numerische Zahlen, sondern auch alphabetische Zahlen oder römische Zahlen hinzufügen.

Inhalt: Zähler (Zählername, Nummerierungstyp)

2. Sie können den Wert des Attributs list-style-type verwenden, um die Art der Nummerierung anzugeben Großbuchstaben, verwenden Sie das Attribut „upper-alpha“, verwenden Sie das Attribut „upper-roman“, wenn Sie römische Großbuchstaben angeben.

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

(4) Zahlenverschachtelung

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｝

(5) Große Zahl in die mittlere Zahl einbetten

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

(6) Verschachtelte Textsymbole auf beiden Seiten der Zeichenfolge hinzufügen

1. Sie können den Attributwert für offene Anführungszeichen und den Attributwert für geschlossene Anführungszeichen des Inhaltsattributs verwenden, um verschachtelte Textsymbole wie Klammern, einfache Anführungszeichen und doppelte Anführungszeichen auf beiden Seiten der Zeichenfolge hinzuzufügen.

2. Der Attributwert für offene Anführungszeichen wird verwendet, um den Anfang des verschachtelten Textsymbols hinzuzufügen, und der Attributwert für geschlossene Anführungszeichen wird verwendet, um das Ende des verschachtelten Textsymbols hinzuzufügen.

3. Verwenden Sie das Anführungszeichen-Attribut im Stil des Elements, um anzugeben, welche verschachtelten Textsymbole verwendet werden sollen

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

Verwandte Empfehlungen:

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!