phpstorm z coding zen coding功能写法说明

本文链接：https://blog.csdn.net/yunskycole/article/details/60875591

都说phpstorm是写php的神器。 z coding zen coding功能写法说明

这里是一个支持的属性和操作符的列表：

E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);

写好后直接跟上tab键就可以见证奇迹的时刻。

例1：div#box>ul.nav>li*4>a>span.txt>p*2

按tab键后

<div id="box">
  <ul class="nav">
    <li><a href=""><span class="txt">
    <p></p>
    <p></p>
    </span></a></li>
    <li><a href=""><span class="txt">
    <p></p>
    <p></p>
    </span></a></li>
    <li><a href=""><span class="txt">
    <p></p>
    <p></p>
    </span></a></li>
    <li><a href=""><span class="txt">
    <p></p>
    <p></p>
    </span></a></li>
  </ul>
</div>

例2:ul#nav>li.item-$*5
按tab键后
<ul id="nav">
  <li class="item-1"></li>
  <li class="item-2"></li>
  <li class="item-3"></li>
  <li class="item-4"></li>
  <li class="item-5"></li>
</ul>