Explication détaillée des exemples d'attributs de contenu en CSS3

Cet article présente principalement l'attribut content dans CSS3 exemples d'utilisation , qui constituent les connaissances de base pour démarrer avec CSS3. Les amis qui en ont besoin peuvent s'y référer

<.>Il y a quatre pseudo-éléments principaux en CSS :

before/after/first-letter/first-line Dans le sélecteur d'élément avant/after pseudo- , il y a un contenu. attribut, Capable d'insérer du contenu dans la page.
Insérer du texte brut

content : "Insérer un article", ou content:none n'insère pas de contenu

html:

XML/HTMLCodeCopier le contenu dans le presse-papier

1. <h1 >C'est h1h1>

2. < 🎜>h2>C'est h2h2>

css

Code CSS

Copier le contenu dans le presse-papiers

Exécuter le résultat :

h1::after{   
    content:"h1后插入内容"
}   
h2::after{   
    content:none
}

jsfiddle net/. dwqs/Lmm1r08x/

Les symboles de texte intégrés
peuvent utiliser la valeur d'attribut de guillemet ouvert et la valeur d'attribut de guillemet fermant de l'attribut de contenu des deux côtés de la

chaîne

Ajoutez des symboles littéraux imbriqués comme des crochets, des guillemets simples, des guillemets doubles. les guillemets ouverts sont utilisés pour ajouter le symbole de texte de début et les guillemets fermés sont utilisés pour ajouter le symbole de texte de fin. Modifiez le CSS ci-dessus :

Code CSS

Copiez le contenu dans le presse-papiers

Résultat d'exécution :

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;   
}

jsfiddle.net/ dwqs /p8e3qvv4/

Insérer
imagel'attribut content peut également insérer des images directement avant/après l'élément

html :

Code XML/HTML

Copier le contenu dans le presse-papiers

1. <

   h3 >Voici h3h3>

css :

Résultat d'exécution :

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

jsfiddle.net/dwqs/c6qk6pkv/

Insérer la valeur d'attribut de l'élément
L'attribut de contenu peut directement utiliser attr pour obtenir l'attribut de l'élément. Insérez-le dans la position correspondante.

html :

Code XML/HTML

Copier le contenu dans le presse-papiers

1. <

   a href="http:///www.ido321.com">Voici le lien < ;/a>

css :

Code CSS

Copier le contenu dans le presse-papiers

Résultat d'exécution :

a:after{   
    content:attr(href);   
}

jsfiddle.net/dwqs/m220nzan/

Insérer le numéro de projet
Utiliser l'attribut compteur du contenu pour ajouter des numéros consécutifs à plusieurs éléments.

html :

Code XML/HTML

Copier le contenu dans le presse-papiers

1. <

   h1>Grand titreh1>

2. <

   p>Textep>

3. <

   h1>Gros titreh1>

4. <

   p>Textep>

5. <h1>大标题h1>

6. <p>文字p>

7. <h1>大标题h1>

8. <p>文字p>

css:

CSS Code复制内容到剪贴板

h1:before{   
    content:counter(my)'.';   
}   
h1{   
    countercounter-increment:my;   
}

运行结果：
https://jsfiddle.net/dwqs/2ueLg3uj/
项目编号修饰

默认插入的项目编号是数字型的，1,2,3.。。。自动递增，也能给项目编号追加文字和样式,依旧利用上面的html，css修改如下：

CSS Code复制内容到剪贴板

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

运行结果：
jsfiddle.net/dwqs/17hqznca/
指定编号种类

利用content(计数器名，编号种类)格式的语法指定编号种类，编号种类的参考可以依据ul的list-style-type属性值。利用上述的html，css修改如下：

CSS Code复制内容到剪贴板

h1:before{   
    content:counter(my,upper-alpha);   
    color:red;   
    font-size:42px;   
}   
h1{   
    countercounter-increment:my;   
}

运行结果：
jsfiddle.net/dwqs/4nsrtxup/
编号嵌套

大编号中嵌套中编号，中编号中嵌套小编号。
html:

XML/HTML Code复制内容到剪贴板

1. <h1>大标题h1>

2. <p>文字1p>

3. <p>文字2p>

4. <p>文字3p>

5. <h1>大标题h1>

6. <p>文字1p>

7. <p>文字2p>

8. <p>文字3p>

9. <h1>大标题h1>

10. <p>文字1p>

11. <p>文字2p>

12. <p>文字3p>

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h)'.';   
}   
h1{   
    countercounter-increment:h;   
}   
p::before{   
    content:counter(p)'.';   
    margin-left:40px;   
}   
p{   
    countercounter-increment:p;   
}

运行结果：
jsfiddle.net/dwqs/2k5qbz51/

在示例的输出中可以发现，p的编号是连续的。如果对于每一个h1后的三个p重新编号的话，可以使用counter-reset属性重置，修改上述h1的css:

CSS Code复制内容到剪贴板

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

这样，编号就重置了，看看结果：
jsfiddle.net/dwqs/hfutu4Lq/

还可以实现更复杂的嵌套，例如三层嵌套。
html:

XML/HTML Code复制内容到剪贴板

1. <h1>大标题h1>

2. <h2>中标题h2>

3. <h3>小标题h3>

4. <h3>小标题h3>

5. <h2>中标题h2>

6. <h3>小标题h3>

7. <h3>小标题h3>

8. <h1>大标题h1>

9. <h2>中标题h2>

10. <h3>小标题h3>

11. <h3>小标题h3>

12. <h2>中标题h2>

13. <h3>小标题h3>

14. <h3>小标题h3>

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h1)'.';   
}   
h1{   
    countercounter-increment:h1;   
    countercounter-reset:h2;   
}   
h2::before{   
    content:counter(h1) '-' counter(h2);   
}   
h2{   
    countercounter-increment:h2;   
    countercounter-reset:h3;   
    margin-left:40px;   
}   
h3::before{   
    content:counter(h1) '-' counter(h2) '-' counter(h3);   
}   
h3{   
    countercounter-increment:h3;   
    margin-left:80px;   
}

运行结果：
jsfiddle.net/dwqs/wuuckquy/

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!