css3之使用选择器在页面中插入内容

来源：互联网发布：java new object数组编辑：程序博客网时间：2024/04/29 12:47

1、使用选择器插入文字内容
在CSS3中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容。
例如对H2使用before选择器在H2的前面插入文字“Title”等。
<style type="text/css">

h2:before

{

content:"Title";
}

</style>
还可以使用content属性追加一个none属性值来排除一些不需要插入内容的元素。
如：
<style type="text/css">
h2.nocontent:before{
content:none;
}
</style>
例如：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>使用选择器插入内容</title>    <style>        h2:before{            content: "Title";            color:#fff;            background: green;            padding: 1px 5px;            margin-right: 10px;        }        h2.nocontent:before{            content: none;        }    </style></head><body><h1>使用选择器插入内容</h1><h2>使用选择器插入内容</h2><h2>使用选择器插入内容</h2><h2 class="nocontent">使用选择器插入内容</h2><h2>使用选择器插入内容</h2><h2>使用选择器插入内容</h2></body></html>

2、使用选择器插入图片文件
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径，比如在标题前插入一张图片！
如：
<style type="text/css">
h2:before{
content:url(1.gif);
}
</style>
例如：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>插入图片</title>    <style>        /*h2:after{*/        /*content: url(hot.gif);*/        /*}*/        h2.hot:after{            content: url(hot.gif);        }        h2.digest:after{            content: url(digest.gif);        }        h2.xinren:after{            content: url(xinren.gif);        }    </style></head><body><h1>插入图片</h1><h2 class="hot">这是最近很火的帖子</h2><h2 class="digest">精心为您挑选的帖子</h2><h2 class="hot">这是最近很火的帖子</h2><h2 class="hot">这是最近很火的帖子</h2><h2 class="xinren">新人报道</h2><h2 class="hot">这是最近很火的帖子</h2><h2>插入图片文件</h2></body></html>

效果;

3、使用选择器插入项目编号

可以在多个标题前加上连续编号、在标题/项目编号中追加文字等等。

还可以使用content属性的open-quote属性值与close-quote属性值在字符串的两边添加诸如小括号、单引号、双引号之类的文字字符。如

<style> h1:before{ content:open-quote; 这里open-quote是开始符号}h1:after{ content:close-quote; 这里close-quote是结束符号}h1{quote:"(" ")";   这里quote字符类型（使用双引号（""）的时候需要使用转义字符“\”）}</style> <h1>标题</h1>

1 0