<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用选择器插入内容</title>
<style>
h2:before{
content:"text";
color: aliceblue;
background: green;
padding: 1px 5px;
margin-right: 10px;
}
/*
排除一些不需要插入内容的元素
使用content属性的追加一个none属性值
*/
h2.nocontent:before{
content: none;
}
/*
插入图片文件
只需指定图片的位置url
*/
h2.nocontent:before{
content: url("1.png");
}
</style>
</head>
<body>
<h1>使用选择器插入内容</h1>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2 class="nocontent">使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
</body>
</html>
/*<pre style="font-family: 宋体; font-size: 12pt; background-color: rgb(255, 255, 255);">在多个标题前加上连续编号
*/
<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在多个标题前加上连续编号</title>
<style>
/*
一丶使用方法:
元素 :before{
content:counter(计数器);
}
元素{
counter—increment: 计数器;
}
*/
h1:before{
content: counter(hajsq);
}
h1{
counter-increment:hajsq;
counter-reset: sec;
}
/*
二丶 在项目编号中添加文字
方法:元素:before{
content:'第'counter(计数器)‘章’
}
*/
h1:before{
content: '第'counter(hajsq)'章';
counter-reset: sec;
}
/*
三丶 指定编号的种类
方法 content:counter(计数器,类型)
*/
h1:before{
content: '第'counter(hajsq,upper-alpha)'章';
}
/*
编号的嵌套
编号重置,在其父节点:counter-reset(计数器)
h1{
counter-increment:hajsq;
counter-reset: sec;
}
*/
h2:before{
content: counter(sec);
}
h2{
counter-increment:sec ;
}
</style>
</head>
<body>
<h1>在多个标题前加上连续编号</h1>
<h2>hsjhfjksdhfjkshfjkshf</h2>
<h1>在多个标题前加上连续编号</h1>
<h2>hsjhfjksdhfjkshfjkshf</h2>
<h1>在多个标题前加上连续编号</h1>
<h2>hsjhfjksdhfjkshfjkshf</h2>
<h1>在多个标题前加上连续编号</h1>
<h2>hsjhfjksdhfjkshfjkshf</h2>
</body>
</html>