利用选择器在页面插入内容

最新推荐文章于 2019-06-21 20:52:15 发布

weixin_34056162

最新推荐文章于 2019-06-21 20:52:15 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/qpnets/p/8257725.html

版权

可插入文字/图片/项目编号

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用选择器插入内容</title>
    <style>
        /*在h2标识的内容前面增加"补充"二字,并可设置样式*/
        h2:before{
            content: "补充";
            color:#fff;
            background: green;
            padding: 1px 5px;
            margin-right: 10px;

        }
        /*不希望前面插入内容的话,content直接写none*/
        h2.nocontent:before{
            content: none;
        }
    </style>
</head>
<body>
<h1>ABCDEFG</h1>
<h2>ABCDEFG</h2>
<h2 class="nocontent">ABCDEFG</h2>
<h2>ABCDEFG</h2>
</body>
</html>

插入文字

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入图片文件</title>
    <style>
        h2.hot:after{
            content: url(remen.gif);
        }
        h2.digest:after{
            content: url(jingtie.gif);
        }
        h2.xinren:after{
            content: url(xinren.gif);
        }
    </style>
</head>
<body>
<h1>插入图片文件</h1>
<h2 class="hot">插入图片文件</h2>
<h2 class="digest">插入图片文件</h2>
<h2 class="xinren">插入图片文件</h2>
<h2>插入图片文件</h2>
</body>
</html>

插入图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        /*在h1元素前加入主编号*/
        h1:before{
            /*任意命名计数器名称,比如jsq*/
            content:counter(jsq)'.';
            color: green;
            font-size: 24px;
        }
        h1{
            /*启用h1元素的计数器,并指定应用jsp*/
            counter-increment: jsq;
            /*重置子编号*/
            counter-reset: subjsq;
        }
        /*在h2元素前加入子编号*/
        h2:before{
            /*嵌套主编号跟子编号显示*/
            content:counter(jsq) '-' counter(subjsq);
            color: #ff6600;
            font-size: 18px;
        }
        h2{
            /*启用h2元素的计数器,并指定应用jsp*/
            counter-increment: subjsq;
        }
    </style>
</head>
<body>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h1>在多个标题前加上连续编号</h1>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h1>在多个标题前加上连续编号</h1>
</body>
</html>

插入编号

另外,还可以利用quotes,来成对补充文字前后的内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在字符串两边嵌套文字符号</title>
    <style>
        h1:before{
            content: open-quote;
        }
        h1:after{
            content: close-quote;
        }
        h1{
            /*成对设置*/
            quotes: "begin""end";
        }
    </style>
</head>
<body>
<h1>我是内容</h1>
</body>
</html>