- 子代
:>
示例:在sublime 软件中输入div>ui>li
按tab键
显示的内容为
<div>
<ul>
<li></li>
</ul>
</div>
每个尖括号代表一个子代
- 兄弟
:+
示例:在sublime中输入div+p+dp
按tab键显示为
<div></div>
<p></p>
<blockquote></blockquote>
-
父代
:^
示例:在sublime中输入`div+div>p>span+em^bq
显示为
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
bq节点是在span和em的上一层 也就是和p为兄弟节点
-
重复
:* 重复与HTML紧挨着的一个节点
示例:在sublime中输入ul>li*5
按tab键显示
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
重复5次
- 成组
:()一次重复多个节点
示例:输入(div>dl>(dt+dd)*3)+footer>p
显示
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
-
ID
:# -
Class
:.
6/7示例输入div#header+div.page+div#footer.class1.class2.class3
显示
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
- 属性
:[]
示例td[title="Hello world!" colspan=3]
显示:
属性中的赋值是用等号连接,当腰设置多个属性时用空格来分隔属性
<td title="Hello world!" colspan="3"></td>
使用浏览器查看效果
React的浏览器兼容性
IE8及以上版本,其他浏览器的最高版本都可以