phpstorm,vscode使用仿CSS选择器的语法来快速开发HTML和CSS

使用仿CSS选择器的语法来快速开发HTML和CSS

类型列表
    1、元素名称
    2、元素#ID
    3、元素.样式名
    4、元素>子元素
    5、元素+平级兄弟元素
    6、元素*N批量倍增
    7、元素$*N条目编号


如何使用?
    输入规则后,在最后一个字符后面按tab键即可
元素名称
    div
    <div></div>
元素#ID
    div#userList
    <div id="userList"></div>
元素.样式名
    p.title
    <p class="title"></p>
元素>子元素
    ul>li
    <ul>
        <li></li>
    </ul>
元素+平级兄弟元素
    div+p+h1
    <div></div><p></p><h1></h1>
元素*N批量倍增
    div*5
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
元素$*N条目编号
    div#id-$*5
    <div id="id-1"></div>
    <div id="id-2"></div>
    <div id="id-3"></div>
    <div id="id-4"></div>
    <div id="id-5"></div>




综合案例

div#main>div.top+div.left>ul>li#id$*3+div.right>div>h1.title+div.description+div.contend>div.page>ul>li*5


   结果:

<div id="main">

    <div class="top"></div>

    <div class="left">

        <ul>

            <li id="id1"></li>

            <li id="id2"></li>

            <li id="id3"></li>

            <div class="right">

                <div>

                    <h1 class="title"></h1>

                    <div class="description"></div>

                    <div class="contend">

                        <div class="page">

                            <ul>

                                <li></li>

                                <li></li>

                                <li></li>

                                <li></li>

                                <li></li>

                            </ul>

                        </div>

                    </div>

                </div>

            </div>

        </ul>

    </div>

</div>

            




喜欢 ()or分享