【前端开发系列】—— 利用选择器添加内容

时间 2019-11-19

标签前端开发系列利用选择器添加内容繁體版

原文原文链接

　　上文讲到了CSS3的选择器，经过after和before选择器，在元素先后添加内容。css

　　也能够经过变量来实现自定义的标题html

1 　　　　h1:before{
2  content:'第'counter(mycounter)'章';
3  color:red;
4  font-size:30px;
5         }
6  h1{
7  counter-increment:mycounter;
8         }

　　代码样例

<html>
<head>
    <style type="text/css"> h1:before{ content:'第'counter(mycounter)'章'; color:red; font-size:30px;
        } h1{ counter-increment:mycounter;
        } p:before{ content:open-quote;
        } p:after{ content:close-quote;
        } p{ quotes:"("")";
        }
    </style>
</head>
<body>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
</body>
</html>

【前端开发系列】—— 利用选择器添加内容

代码样例

实现样例

　　代码样例

　　实现样例