emmet是一个提高前端开发效率的工具。

使用方法

后代>

nav>ul>li

兄弟+

div+p

上级^

div+div>p^span

1
2
3
4
5
<div></div>
    <div>
        <p></p>
    </div>
    <span></span>

分组()

div>(header>ul>li*2)+content+footer

1
2
3
4
5
6
7
8
9
10
<div>
        <header>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </header>
        <content></content>
        <footer></footer>
    </div>

乘法*

自增符号$

ul>li.item$*5

1
2
3
4
5
<ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
  </ul>

$@- 倒着的

$@x x开头

ID和类属性

#xxx, .xxx

form#search.wide

自定义属性

img[data-src=”xxx”]

文本

{} p{click}+a{here}

1
2
<p>click</p>
<a href="">here</a>

HTML

!

a

a:link

a:mail

link:css

input:password