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.
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>
Utilisez la valeur d'attribut none de l'attribut content
<style type="text/css"> h2.sample:before{ content:none;} </style>
<style type="text/css"> h2:before{ content:url(mark.png);} </style>
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; }
1. valeur de l'attribut counter dans l'attribut content pour ajouter des nombres consécutifs à plusieurs éléments
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.
h1:before{content:counter(mycounter);} h1{counter-increment:mycounter;}//1、2、3.......
h1:before{content:‘第’counter(mycounter)‘章’;}//第1章大标题、第2章大标题.........
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.、
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}
h2:before{content:counter(mycounter)‘-’ counter(subcounter)‘.’;}//1-1、1-2
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 :
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!