快速写代码神奇语法——Emmet 语法

Emmet 语法

1.内容:”{text}”

如: p{Text}
<p>Text</p>

2.属性和语法: “[attr]”

如: [class=name]{Text}
[id=name]{Text}
或
.name{text}
#name{text}
(.=class , #=id)
<div class="name">Text</div>
<div id="title">Text</div>

3.重复: “*”

如: #title{Text}*4
<div id="title">Text</div>
<div id="title">Text</div>
<div id="title">Text</div>
<div id="title">Text</div>

4.父子: “>”

如: ul>li{text}
<ul>
    <li>text</li>
</ul>

5.兄弟(同级): “+”

如: h1+p
<h1></h1>
<p></p>

6.父级: “^”

如: .box>span{text}^h3{小标题}
<div class="box "><span>text</span></div>
<h3>小标题</h3>

7.分组

如: nav>h3{text}+ul>li*3>a{link}
<nav>
    <h3>text</h3>
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</nav>

8.序号

8.1 序号：”$”

 如: ul>li{Text$}*4
 <ul>
    <li>Text1</li>
    <li>Text2</li>
    <li>Text3</li>
    <li>Text4</li>
 </ul>

8.2 自定义序号：”$@”

如: ul>li{text$@4}*4
<ul>
    <li>text4</li>
    <li>text5</li>
    <li>text6</li>
    <li>text7</li>
</ul>

8.3 逆序：”$@-1”

如: ul>li{text-$@-1}*4 
<ul>
    <li>text-4</li>
    <li>text-3</li>
    <li>text-2</li>
    <li>text-1</li>
</ul>