Emmet

安装成功图片

emmet

一、id和class

#id 
<div class="id"></div>
.class
<div class="class"></div>

二、文本

 p{text}
 <p>text</p>

三、层级

1.子元素

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

2.兄弟元素

div + p + a
<div></div>
<p></p>
<a href=""></a>

3.父级元素

div>p^a
<div>
      <p></p>
</div>
<a href=""></a>

四、重复 *n

ul > li*3 > a{item}
<ul>
      <li><a href="">item</a></li>
      <li><a href="">item</a></li>
      <li><a href="">item</a></li>
</ul>

五、分组 （）

div>h2{购物车}+(ul>li*3>a{item})+p{总价:3件}
<div>
      <h2>购物车</h2>
      <ul>
        <li><a href="">item</a></li>
        <li><a href="">item</a></li>
        <li><a href="">item</a></li>
      </ul>
      <p>总价:3件</p>
</div>

六、属性

a[href="https://php.cn"]{php中文网}
<a href="https://php.cn">php中文网</a>

七、序号

1.$

ul>li{item$}*3
<ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li> 
</ul>

2.$$…

ul>li{item$$$}*3
<ul>
      <li>item001</li>
      <li>item002</li>
      <li>item003</li>
</ul>

3.@n

ul>li{item$@5}*3
<ul>
      <LI>item5</LI>
      <LI>item6</LI>
      <LI>item7</LI>
 </ul>
ul>li{item$@-5}*3 
<ul>
      <li>item7</li>
      <li>item6</li>
      <li>item5</li>
</ul>

隐式标签

一级标签省略，默认为div .site{php}

<div class="site">php</div>

二级标签省略，则由一级标签决定

ul.list>.item*3
<ul class="list">
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
</ul>
select>.item*3
<select name="" id="">
      <option class="item"></option>
      <option class="item"></option>
      <option class="item"></option>
</select>

<table/>,<tbody>,<thead>默认子标签都是<br>

table>.row*3>.col*2
<table>
      <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
      </tr>
      <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
      </tr>
      <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
      </tr>
</table>

<tr>默认子标签是<td>

tr>.item*4
<tr>
      <td class="item"></td>
      <td class="item"></td>
      <td class="item"></td>
      <td class="item"></td>
 </tr>

并非所有父子组合都有这样的定义，列如<dl><dt>就没有