使用选择器在页面中插入

最新推荐文章于 2022-11-10 18:08:29 发布

LifeTime丶

最新推荐文章于 2022-11-10 18:08:29 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/le305301416/article/details/50963236

版权

<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>