css3 - 使用选择器插入内容 - 《html5 css3笔记》

使用选择器插入文字
使用选择器插入图像
- 将alt属性的值作为图像的标题来显示
使用content属性插入项目编号

使用选择器插入文字

在 CSS2 中，可以使用 before 选择器在元素前面插入内容，使用 after 选择器在元素后面插入内容，在选择器的 content 属性中定义要插入的内容。

如下示例，有三个 h2 元素，如果我们想在标题的前面插入一个“hello”，那么就可以用到 before 来做。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2::before{
      content: "Hello";
      background-color: skyblue;
      color: #fff;
      margin-right: 10px;
      font-family:Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <div>
    <h2>标题文字1</h2>
    <h2>标题文字2</h2>
    <h2>标题文字3</h2>
  </div>
</body>
</html>

如果对于“标题文字2”这个 h2 元素不添加“hello”文字，可以通过设置一个 class，并且将样式设置为 content:none。这里也可以使用 content: normal，效果和 none 相同。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2::before{
      content: "Hello";
      background-color: skyblue;
      color: #fff;
      margin-right: 10px;
      font-family:Arial, Helvetica, sans-serif;
    }
    h2.sample:before{
      /* content: none; */
      content: normal;
    }
  </style>
</head>
<body>
  <div>
    <h2>标题文字1</h2>
    <h2 class="sample">标题文字2</h2>
    <h2>标题文字3</h2>
  </div>
</body>
</html>

normal 和 none 的区别？从 CSS 2.1 开始，只有当使用 before 选择器与 after 选择器的时候，normal 属性值的作用才与 none 属性值的作用相同，都是不让选择器在个别元素的前面或后面插入内容。但是 none 属性值只能应用在这两个选择器中，而 normal 属性值还可以应用在其他用来插入内容的选择器中，而在 CSS 2 中，只有 before 选择器与 after 选择器能够用来在元素的前面或后面插入内容，所以这两者的作用完全相同。在 CSS 3 草案中，已经追加了其他一些可以用来插入内容的选择器的提案，针对这一类选择器，就只能使用 normal 属性值了，而且 normal 属性值的作用也会根据选择器的不同而发生变化。

使用选择器插入图像

当使用 content 来插入图像时，需要用 url 属性值来指定图像文件的路径。如下所示，通过 content 的 url 来指定图像。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h3::after{
      content:url(./1.png)
    }
  </style>
</head>
<body>
  <h3>标题1</h3>
  <h3>标题2</h3>
  <h3>标题3</h3>
</body>
</html>

但是这种方式没有更改图片的其他属性，一般还是选择使用追加背景图像的方式来显示比较好。

h3{
  background-image: url(./1.png);
  background-size: 18px 18px;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 25px;
}

将alt属性的值作为图像的标题来显示

如果在 content 属性中通过“attr（属性名）”这种形式来指定 attr 属性值，可以将某个属性的属性值显示出来。到目前为止，只有 Opera10 浏览器对这个 attr 属性值提供支持。

如下示例，在图像文件后面显示图像文件的标题，在样式中将 attr 属性值设定为 img 元素的 alt 属性值，这样图像文件的标题文字就是 alt 属性中指定的文字了。这里测试没效果，没有截图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img::after{
      content:attr(alt);
      display: block;
      text-align: center;
      margin-top: 5px;;
    }
  </style>
</head>
<body>
  <img src="./1.png" alt="微笑表情" />
</body>
</html>

使用content属性插入项目编号

插入项目编号
下面我们来看看如何利用这个 content 属性来在项目前插入项目编号。

在多个标题前加上连续编号，首先需要在 content 属性中指定 counter 属性值，接着在元素样式中指定 counter-increment 属性。如下示例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li::before{
      content:counter(mycounter);
    }
    li{
      counter-increment: mycounter;
    }
  </style>
</head>
<body>
  <ul>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
  </ul>
</body>
</html>

在项目编号中追加文字
还可以在插入的项目编号中加入文字。修改上面的示例。

li::before{
    content:'第'counter(mycounter)'章';
}

指定编号的样式
还可以指定追加编号的样式。

li::before{
  content:'第'counter(mycounter)'章';
  color: skyblue;
  font-size: 24px;
}

指定编号的种类
还可以追加字母编号或罗马数字编号。使用 list-style-type 属性的值来指定编号的种类。例如，指定大写字母编号时，使用“upper-alpha”属性，指定大写罗马字母时，使用“upper-roman”属性。

li::before{
  content:'第'counter(mycounter, upper-alpha)'章';
  color: skyblue;
  font-size: 24px;
}

编号嵌套
可以在大编号中嵌套中编号，在中编号中嵌套小编号。
在下面示例中，有两个大标题，每个大标题中又有三个中标题，使用编号嵌套的方式分别对大标题与中标题进行分层编号。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1::before{
      content: counter(mycounter);
      color: skyblue;
      font-size: 24px;
    }
    h1{
      counter-increment: mycounter;
    }
    h2::before{
      content: counter(subcounter);
      color: skyblue;
      font-size: 18px;
    }
    h2{
      counter-increment: subcounter;
    }
  </style>
</head>
<body>
  <h1>大标题</h1>
  <h2>中标题</h2>
  <h2>中标题</h2>
  <h1>大标题</h1>
  <h2>中标题</h2>
  <h2>中标题</h2>
</body>
</html>

这里中标题的编号是连续的，如果要将第二个大标题里的中标题重新开始编号的话，需要在大标题中使用counter-reset 属性将中编号进行重置。

h1{
  counter-increment: mycounter;
  counter-reset: subcounter;
}

还可以在中编号中嵌入大编号。只需修改 contentcounter(mycounter)'-'counter(subcounter) 即可。

h2::before{
  content: counter(mycounter)'-'counter(subcounter);
  color: skyblue;
  font-size: 18px;
}

在字符串两边添加嵌套文字符号
还可以使用 content 属性的 open-quote 属性值与 close-quote 属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。
open-quote 属性值用于添加开始的嵌套文字符号，close-quote 属性值用于添加结尾的嵌套文字符号。

如下示例，在该示例中有一个 h1 标题元素，文字为“标题”，使用 before 选择器与 after 选择器在标题文字两边添加括号。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1::before{
      content:open-quote;
    }
    h1::after{
      content: close-quote;
    }
    h1 {
      quotes: "(" ")";
    }
  </style>
</head>
<body>
  <h1>标题</h1>
</body>
</html>

to be continue…