Comment utiliser les sélecteurs pour insérer le contenu requis dans la page en CSS3 (code ci-joint)

Le contenu de cet article explique comment utiliser les sélecteurs CSS3 pour insérer le contenu requis dans la page. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1 Utilisez un sélecteur pour insérer du contenu

Utilisez le sélecteur après ou avant pour définir le contenu à insérer dans l'attribut de contenu du sélecteur lorsque le contenu est inséré. est du texte Lors de l'insertion de texte, vous devez ajouter des guillemets simples ou doubles des deux côtés du texte inséré.

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

2 Spécifiez les éléments individuels à ne pas insérer

Utilisez la valeur d'attribut none de l'attribut content

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

3 Insérer des images Fichier

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

4 Afficher la valeur de l'attribut alt comme titre de l'image

dans l'attribut content en précisant "attr (nom de l'attribut)" Sous la forme de , la valeur d'un certain attribut peut être affichée.

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

5 Utilisez l'attribut content pour insérer le numéro d'article

(1) Ajoutez des numéros consécutifs avant plusieurs titres

1. valeur de l'attribut counter dans l'attribut content pour ajouter des nombres consécutifs à plusieurs éléments

558dc77cf99fee6757323747f07fa144: before{ content: counter (nom du compteur);} (utilisez un compteur pour calculer le nombre, et le compteur peut être nommé arbitrairement)

2. Vous devez également ajouter la spécification de l'attribut de contre-incrément de l'élément dans le style de l'élément. Afin d'utiliser la numérotation continue, vous devez définir la valeur d'attribut du contre-incrément. incrémenter l'attribut au sélecteur avant ou après la sélection. Le nom du compteur spécifié dans la valeur de l'attribut du compteur.

558dc77cf99fee6757323747f07fa144{ contre-incrément : le nom du compteur spécifié dans le sélecteur avant ou après}

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

(2) Ajouter du texte au numéro d'article

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

(3) Spécifiez le type de numéro

1. En utilisant l'attribut de contenu du sélecteur avant ou après, vous pouvez ajouter non seulement des nombres numériques, mais également des nombres alphabétiques ou des chiffres romains.

content: counter (nom du compteur, type de numérotation)

2 Vous pouvez utiliser la valeur de l'attribut list-style-type pour spécifier le type de numérotation. lettres majuscules, utilisez l'attribut « upper-alpha », utilisez l'attribut « upper-roman » lorsque vous spécifiez des lettres romaines majuscules.

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

(4) Imbrication de nombres

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) Incorporation de grands nombres dans des nombres du milieu

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

(6) Ajout des deux côtés de la chaîne Symboles de texte imbriqués

1. Vous pouvez utiliser la valeur d'attribut de guillemet ouvert et la valeur d'attribut de guillemet fermant de l'attribut de contenu pour ajouter des symboles de texte imbriqués tels que des crochets, des guillemets simples et des guillemets doubles des deux côtés. de la chaîne.

2. La valeur de l'attribut open-quote est utilisée pour ajouter le début du symbole de texte imbriqué, et la valeur de l'attribut close-quote est utilisée pour ajouter la fin du symbole de texte imbriqué.

3. Utilisez l'attribut quotes dans le style de l'élément pour spécifier les symboles de texte imbriqués à utiliser

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

Recommandations associées :

CSS3 Series 1. (Présentation, sélecteur, utiliser le sélecteur pour insérer du contenu)_html/css_WEB-ITnose

Comment insérer du contenu dans la page en css3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!