HTML初始结构
!+ Tab
快速生成基础结构
id(#),class(.)
div#test
<div id="test"></div>
div.test
<div class="test"></div>
子节点(>),兄弟节点(+),上级节点(^)
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 (两个 ^ ^ 就是上上级)
<div>
<ul>
<li></li>
</ul>
<div></div>
</div>
重复(*)
div*5(*号后面的数字就是重复的元素个数)
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
分组(())
div>(ul>li>a)+div>p
括号里面的内容为一个代码块,表示与括号内部嵌套和外面的层级无关
<div>
<ul>
<li><a href=""></a></li>
</ul>
<div>
<p></p>
</div>
</div>
属性([attr])
a[href=’###’ name=‘xiaoA’]
<a href="###" name="xiaoA"></a>
编号($)
ul>li.test$*3
<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>
ul>li*3.test$@3
<ul>
<li class="test3"></li>
<li class="test4"></li>
<li class="test5"></li>
</ul>
文本({})
ul>li.test$*3{测试 $}
<ul>
<li class="test1">测试1</li>
<li class="test2">测试2</li>
<li class="test3">测试3</li>
</ul>
隐式标签
.test
<div class="test"></div>
ul>.test$*3
<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>
select>.test$*5
<select name="" id="">
<option class="test1"></option>
<option class="test2"></option>
<option class="test3"></option>
<option class="test4"></option>
<option class="test5"></option>
</select>