03emmit 语法

emmit 语法

E代表标签名

一、E*n

创建n个E标签

    <!--
        p*5
    -->
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

二、E{今天}*n

创建n个内容为’今天’的 E标签

    <!--
        p{今天}*5 
    -->
     <p>今天</p>
     <p>今天</p>
     <p>今天</p>
     <p>今天</p>
     <p>今天</p>

三、E{今天$}*n

创建n个内容为’今天’+序号的 E标签，$表示序号，从1开始

    <!-- p{今天$}*5 -->

     <p>今天1</p>
     <p>今天2</p>
     <p>今天3</p>
     <p>今天4</p>
     <p>今天5</p>

四、> 表示的下一个层级元素（子元素）

E>a 在E标签中添加子元素 a 标签

    <ul>
    <!-- li*5>a{标签$} -->

        <li><a href="">标签1</a></li>
        <li><a href="">标签2</a></li>
        <li><a href="">标签3</a></li>
        <li><a href="">标签4</a></li>
        <li><a href="">标签5</a></li>

     </ul>

五、+ 表示同级

E+p 表示 同时创建兄弟元素E和p

    <!-- div+p -->

     <div></div>
     <p></p>

六、^ 表示上一级

E>p^div 创建 div 标签和 E 标签同级，也就是创建 p 标签的上一级

    <!-- div>p^div -->

    <div>
      <p></p>
    </div>
    <div></div>

    <!-- ul>li*5^div -->

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

七、[] 设置属性

	 <!-- a[href="##"]*5 -->

     <a href="##"></a>
     <a href="##"></a>
     <a href="##"></a>
     <a href="##"></a>
     <a href="##"></a>

	<!-- a[href="###"]{百度}*5 -->

     <a href="###">百度</a>
     <a href="###">百度</a>
     <a href="###">百度</a>
     <a href="###">百度</a>
     <a href="###">百度</a>