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

最新推荐文章于 2022-08-03 11:10:14 发布

erdouzhang

最新推荐文章于 2022-08-03 11:10:14 发布

阅读量1.3k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/70880531

版权

css3 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了如何使用CSS3选择器在HTML页面中插入内容，包括文字、图像，以及如何创建项目编号。内容涵盖指定选择器插入文字、避免个别元素插入、插入图像文件、使用content属性和counter-increment属性创建连续编号，以及如何更改编号种类（数字、字母、罗马数字）。此外，还讲解了编号的嵌套技巧，以实现不同层级标题的独立编号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>