html - emment语法

1.! 生成html初始结构

 

2.标签#id

div#small: <div id="small"></div>

 

3.标签.class

div.small：<div class="small"></div>

 

4.子节点 >

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

 

5.兄弟节点 +

div+ul+li：
<div></div>
<ul></ul>
<li></li>

 

6.上级节点 ^

div>ul>li^div：
<div>
  <ul>
    <li></li>
  </ul>
  <div></div>
</div>

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

 

7.重复 *

div*3：
<div></div>
<div></div>
<div></div>

 

8.分组()

div>(ul>li>a)+div>p：
<div>
  <ul>
    <li><a href=""></a></li>
  </ul>
  
  <div>
    <p></p>
  </div>
</div>

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

这里如果不加括号的话，猜想下，a+div这样div就是和a是兄弟关系了