写在前,嵌套(父子),并列(兄弟),上级(父级/其他级别的兄弟),属性(img的src), 内容(文本)
第一例:快速添加class/id 的名字
<!-- div.home -->
<div class="home"></div>
<!-- div#home -->
<div id="home"></div>
<!-- 本例中 div可以是其他标签 -->
第二例:嵌套多级
<!-- div>p -->
<div>
<p></p>
</div>
<!-- div>ul>li*3>img -->
<div>
<ul>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
</div>
<!-- div>ul>li>img*2 -->
<div>
<ul>
<li>
<img src="" alt="">
<img src="" alt="">
</li>
</ul>
</div>
第三例:并列
<!-- dvi+p+ul>li -->
<dvi></dvi>
<p></p>
<ul>
<li></li>
</ul>
第四例:寻找上级或上上级用 ^ ,一层用一个。两层用两个
<!-- div>ul>li*3>p>^^^span -->
<div>
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>
<span></span>
</div>
第五例:添加属性用 [ ]
<!-- ul+>img[src='a$']*3 -->
<ul>
<li>
<img src="a1" alt="">
<img src="a2" alt="">
<img src="a3" alt="">
</li>
</ul>
第六例:添加信息 { }
<!-- ul>li{这是第$条消息}*3 -->
<ul>
<li>这是第1条消息</li>
<li>这是第2条消息</li>
<li>这是第3条消息</li>
</ul>
<!-- 其中 $ 符是编辑用1到n (多少条) -->