vs Code 快速生成代码

话不多说，上代码

在vs code 中输入 div.main>span.box_$*6

<div class="main">
    <span class="box_1"></span>
    <span class="box_2"></span>
    <span class="box_3"></span>
    <span class="box_4"></span>
    <span class="box_5"></span>
    <span class="box_6"></span>
</div>

类名 . : div.obx

<div class="obx"></div>

id # : div#obx

<div id="obx"></div>

后代 > :div>span>a

    <div>
        <span>
            <a href=""></a>
        </span>
    </div>

属性 []: div[title="test"]

<div title="我是属性名"></div>

兄弟 + : div+span+i

    <div></div>
    <span></span>
    <i></i>

上级 ^ : div>span^i

    <div>
        <span></span>
    </div>
    <i></i>

* : ul>li*3

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

* : ul>li*3

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

文本 {} : div>span{哈哈哈}

    <div>
        <span>哈哈哈</span>
    </div>

自增符 $: ul>li.list_{list_$}*3

    <ul>
        <li class="list_">list_1</li>
        <li class="list_">list_2</li>
        <li class="list_">list_3</li>
    </ul>

综合练习

div.item*2>img[src="text_imgs/ktv$.png"]+span{span$}

    <div class="item">
        <img src="text_imgs/ktv1.png" alt="">
        <span>span1</span>
    </div>
    <div class="item">
        <img src="text_imgs/ktv2.png" alt="">
        <span>span2</span>
    </div>