纯CSS修改checkbox复选框样式

借鉴网友博客,改用后整理收录

效果图:

移入:

<div class="cnblogs_code">

    
        
        
                
                    .box_inner1 label</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            cursor</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; pointer</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 25px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>        <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;此处width和height是选框显示出来的大小</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 25px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>                <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;此处top和left是选框显示出来位置,可根据需求进行调节</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; #e75213</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>        <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;此处是复选框背景颜色,下面是边框颜色,设置一致是保持统一</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            border</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1px solid #E75213</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        .box_inner1 label:after</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            opacity</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>        <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;选中后样式的透明度,1是不透明</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            content</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; ''</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>    <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;选中后的内容,此处为空是指把默认的去掉,下面自定义</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 9px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;    
            height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 5px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; transparent</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>    <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;这一块是核心,可以自己调试看效果</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 6px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 7px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            border</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 3px solid white</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            border-top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            border-right</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>

            <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;选中的样式是用盒子div加背景色,加旋转实现的,下面的代码是旋转45度</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            -moz-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
            <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;-o-transform: rotate(-45deg);</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            -ms-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>

        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        .box_inner1 label:hover::after</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            opacity</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0.5</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>        <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;鼠标移入移出的透明度</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        .box_inner1 input[type=checkbox]:checked + label:after</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            opacity</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>        <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;取消选中</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span>

        <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;要有多个选框,直接复制一份重命名,避免冲突</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span>
        <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;第二个</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #800000"&gt;
        .box_inner2</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 25px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            margin</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 20px 100px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; relative</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        .box_inner2 label</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            cursor</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; pointer</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 25px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 25px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;        
            left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;    
            background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; #e75213</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            border</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1px solid #E75213</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        .box_inner2 label:after</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            opacity</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            content</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; ''</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 9px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 5px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; transparent</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 6px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 7px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            border</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 3px solid white</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            border-top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            border-right</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;

            -webkit-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            -moz-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
            <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;-o-transform: rotate(-45deg);</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            -ms-transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            transform</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; rotate(-45deg)</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>

        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        .box_inner2 label:hover::after</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            opacity</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0.5</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        .box_inner2 input[type=checkbox]:checked + label:after</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            opacity</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        input[type=checkbox]</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            visibility</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; hidden</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span>


    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;head</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;body</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="box_inner1"</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="checkbox"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="box_innerInput1"</span> <span style="color: #0000ff"&gt;/></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;label </span><span style="color: #ff0000"&gt;for</span><span style="color: #0000ff"&gt;="box_innerInput1"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;></span>        
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="box_inner2"</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="checkbox"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="box_innerInput2"</span> <span style="color: #0000ff"&gt;/></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;label </span><span style="color: #ff0000"&gt;for</span><span style="color: #0000ff"&gt;="box_innerInput2"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;></span>        
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;body</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

?参考:

http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml

https://blog.csdn.net/qq_34182808/article/details/79992465

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!