常用emmet语法笔记

1. div#test效果如下

<div id="test"></div>

2. div.test效果如下

<div class="test"></div>

3. 节点 子节点：> 兄弟节点：+ 上级节点 ^

• div>ul>li>p

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

• div+ul+p

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

• div>ul>li^{div(这里的}是接在li后面所以在li的上一级，与ul成了兄弟关系,当然两个^^就是上上级）

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

4. div*5

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

5. 分组括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关

• div>(ul>li>a)+div>p

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

6. 属性 div[index=1],’[]'内可定义多个属性

<div index="1"></div>

7. ul>li.test$\ast 3（$代表一位数，后面更上*数字就代表从1递增到填写的数字）

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

• ul>li.test$KaTeX parse error: Can't use function '$' in math mode at position 5: *3一个$̲ 代表一位数$(001)

 <ul>
   <li class="test001"></li>
   <li class="test002"></li>
   <li class="test003"></li>
 </ul>

8. div>li.testKaTeX parse error: Expected '}', got 'EOF' at end of input: *3{测试} 文本 {{}}

 <div>
    <li class="test1">{测试1}</li>
    <li class="test2">{测试2}</li>
    <li class="test3">{测试3}</li>
</div>

9. 隐式标签

• .test

<div class="test"></div>

• ul>.test*3

<ul>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
</ul>