• phpstorm使用zen coding 快速编辑补全html/css代码


    百科定义:

    使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发。

    Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。




    类型列表
        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#container>div.left>ul>li#id$*5+div.right>div>h1.title+div.description+div.content>div.page>ul>li*5

       结果:

        <div id="container">
            <div class="left">
                <ul>
                    <li id="id1"></li>
                    <li id="id2"></li>
                    <li id="id3"></li>
                    <li id="id4"></li>
                    <li id="id5"></li>
                    <div class="right">
                        <div>
                            <h1 class="title"></h1>
                            <div class="description"></div>
                            <div class="content">
                                <div class="page">
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>

  • 相关阅读:
    服务器&域名那些事儿
    原生js实现简单打字机效果
    Mac OS X 11以上系统的Rootless机制问题
    用hexo书写github.io博客 学习心得 教程
    冒泡排序
    选择排序
    TCP三次握手和四次挥手
    常见HTTP状态码
    JSONP
    前端缓存(cookies、localStorage、sessionStorage)
  • 原文地址:https://www.cnblogs.com/shixiuxian/p/8523217.html
Copyright © 2020-2023  润新知