思路:
1, 使用 nth-of-type 伪类选择器选择不同的 div;
2, 使用::before 伪类元素添加不同内容即可.
(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- /* 设置统一的 div 样式, 也可以单独设置 */ div{ color: #fff; width: 100px; height: 100px;
- margin: 8px; background: skyblue; } /* 选中第一个 div 设置一个背景用于区分 下同 */ div:nth-of-type(1){
- background: red; } /* 利用伪类元素 添加不同的内容到 div 中 */ div:nth-of-type(1)::before{
- content: "这是 div1 的内容"; } div:nth-of-type(2){ background: pink; } div:nth-of-type(2)::before{
- content: "这是 div2 的内容"; } div:nth-of-type(3){ background: green; } div:nth-of-type(3)::before{
- content: "这是 div3 的内容"; }
- </style>
- </head>
- <body>
- <div>
- </div>
- <div>
- </div>
- <div>
- </div>
- </body>
- </HTML>
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15159.html