您的位置：首页 > Web前端 > CSS

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

2017-04-28 08:56 471 查看

1.使用选择器来插入内容

当插入的内容为文字时，必须要在插入文字的两旁加上单引号或者双引号。

html：

<h2>我是一个标题</h2>

css：

<style>
h2::before {
content: 'COLUMN';
color: #fff;
background-color: orange;
font-family: 'Comic Sans Ms',Helvetica,sans-serif;
padding: 1px 5px;
margin-right: 10px;
}
</style>

2.指定个别元素不进行插入

html：

<body>
<h2>我是一个标题</h2>
<h2 class="sample">我是标题2</h2>
</body>

css：

<style>
h2::before {
content: 'COLUMN';
color: #fff;
background-color: orange;
font-family: 'Comic Sans Ms',Helvetica,sans-serif;
padding: 1px 5px;
margin-right: 10px;
}
h2.sample::before { /*类名为sample的h2标签不添加样式*/
content: none;
}
</style>

3.插入图像文件

使用before或after选择器，除了可以在元素的前面或后面插入文字之外，还可以插入图像文件。插入图像时,需要使用url属性值来指定图像文件路径如下：

html：

<body>
<h2 class="new">我是一个标题B</h2>
<h2 class="new">我是一个标题C</h2>
<h2>我是标题D</h2>
</body>

css：

<style>
h2.new::after {
content: url(./images/02.jpg);
}
</style>

解析：目前IE8只支持插入文字，不支持插入图像文件；

插入图像文件的好处：虽然可以利用img元素在画面中追加图像文件，但是也可以使用样式表来追加图像文件，好处是节省页面编码的时间。推荐使用插入图像文件的方法。

用途：新发表的文章、新到的货物等

4.使用content属性来插入项目编号

html:

<body>
<h2 class="new">我是一个标题</h2>
<p>示例文字</p>
<h2 class="new">我是一个标题</h2>
<p>示例文字</p>
<h2 class="new">我是一个标题</h2>
<p>示例文字</p>
</body>

css：

<style>
h2::before{
content: counter(mycounter);/*mycounter是计数器名*/
}
h2 {
counter-increment: mycounter;/*设置连续编号*/
}
</style>

解析：counter-increment是为了使用连续编号来设置before或after选择器的content属性值中所设定的计数器名；

5.在项目编号中追加文字

html：

<body>
<h2>我是一个标题</h2>
<p>示例文字</p>
<h2>我是一个标题</h2>
<p>示例文字</p>
<h2>我是一个标题</h2>
<p>示例文字</p>
</body>

css：

<style>
h2::before{
content: '第'counter(mycounter)'章';
color: blue; /*设置编号的样式*/
font-size: 30px;
}
h2 {
counter-increment: mycounter;
}
</style>

6.指定编号的种类

用before或after选择器的content属性，不仅可以追加数字编号，还可以追加字母编号、罗马数字编号。使用方法如下：

content:counter(计数器名,编号种类)

编号种类：使用“upper-alpha”指定大写字母编号；”upper-roman”指定大写罗马字母

例如：

大写字母编号css：

<style>
h2::before{
content: counter(mycounter,upper-alpha);/*大写字母编号*/
color: blue;
font-size: 30px;
}
h2 {
counter-increment: mycounter;
}
</style>

大写罗马字母css:

<style>
h2::before{
content: counter(mycounter,upper-roman);/*大写罗马字母编号*/
color: blue;
font-size: 30px;
}
h2 {
counter-increment: mycounter;
}
</style>

7.编号嵌套

html：

<body>
<h2>我是一个标题</h2>
<h4>我是中标题</h4>
<h4>我是中标题</h4>
<h2>我是一个标题</h2>
<h4>我是中标题</h4>
<h4>我是中标题</h4>
<h2>我是一个标题</h2>
<h4>我是中标题</h4>
<h4>我是中标题</h4>
</body>

第一张图片css：

<style>
h2::before{
content: counter(mycounter)'.';
color: blue;
font-size: 30px;
}
h2 {
counter-increment: mycounter;
}
h4::before {
content: counter(subcounter)'.';
}
h4 {
counter-increment: subcounter;
margin-left: 40px;
}
</style>

第二张图片css：

<style>
h2::before{
content: counter(mycounter)'.';
color: blue;
font-size: 30px;
}
h2 {
counter-increment: mycounter;
counter-reset: subcounter; /*将中编号进行重置*/
}
h4::before {
content: counter(subcounter)'.';
}
h4 {
counter-increment: subcounter;
margin-left: 40px;
}
</style>

解析：在第一张图片中看到这6个中标题的编号是连续的，如果要使大标题里的中标题重新开始编号的话，需要在大标题中使用

counter-reset

属性将中编号进行重置。即在h2元素的样式指定代码添加

counter-reset

属性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航