Emmet | Emmet语法汇总

后代:>

div>ul>li

1
2
3
4
5


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

兄弟:+

div+p+span

1
2
3
4
5


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

提升:^

使得当前层级的标签向上提升一个等级

div+div+span>p^ul>li

1
2
3
4
5
6
7
8


<div></div>
<div></div>
<span>
  <p></p>
</span>
<ul>
  <li></li>
</ul>

分组:()

div>(header>ul>li*2>a)+footer>p

如果上面不加括号，意思是在a标签的后面加footer与p标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

乘号:*

ul>li*5

1
2
3
4
5
6
7


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

自增符号:$

h$[title=item$]{Header $}*4

1
2
3
4


<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
<h4 title="item4">Header 4</h4>

设置id和class属性:#以及.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!-- #item1 -->
<div id="item1"></div>
<!-- .main -->
<div class="main"></div>
<!-- #item2.l-main -->
<div id="item2" class="l-main"></div>
<!-- tabld#item3.r-main -->
<tabld id="item3" class="r-main"></tabld>
<!-- div.footer.w50.h30 -->
<div class="footer w50 h30"></div>

自定义属性：[]

1
2
3
4
5
6


<!-- div[title='thisend'] -->
<div title="thisend"></div>
<!-- td[rowspan=2 colspan=3 title=knowledge] -->
<td rowspan="2" colspan="3" title="knowledge"></td>
<!-- [a='v1' b="v2"] -->
<div a="v1" b="v2"></div>

自定义标签内容:{}

1
2
3
4


<!-- button{click me} -->
<button>click me</button>
<!-- p>{Hello }+a{Click Here}+{to My Blog!} -->
<p>Hello <a href="">Click Here</a>to My Blog!</p>

其他用法请具体参考

Emmet | Emmet语法汇总

相关文章：