HTML标签速写相关规则

符号 功能 示例
> 子级元素 div>ul>li
+ 并列元素 div+div>span
^ 父级兄弟元素 div>ul^div>span
^^ 多级上层兄弟元素 ul>li>span^^div
* 重复当前元素 ul>li*3
() 分组，操作多元素 div>(p>span)*3
# 添加id属性 div#main
. 添加class属性 div.content
[] 添加多种属性 div[class=content title=head]
$ 顺序排列占位符默认1 p.item$*3
$$ 顺序排列占位符默认01 p.item$$*3
@ 顺序排列从某数开始 p.item$@3*3
@- 逆序排列到某数结束 p.item$@-3*3
{} 元素文本内容 div#main>div.content>p.item{text1}+p.item{text2}
  1. div>ul>li
1
2
3
4
5
<div>
    <ul>
        <li></li>
    </ul>
</div>
  1. div+div>span
1
2
3
4
<div></div>
<div>
    <span></span>
</div>
  1. div>ul^div>span
1
2
3
4
5
6
<div>
    <ul></ul>
</div>
<div>
	<span></span>
</div>
  1. ul>li>span^^div
1
2
3
4
5
6
<ul>
    <li>
       <span></span>
    </li>
</ul>
<div></div>
  1. ul>li*3
1
2
3
4
5
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
  1. div>(p>span)*3
1
2
3
4
5
<div>
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
</div>
  1. div#main
1
<div id="main"></div>
  1. div.content
1
<div class="content"></div>
  1. div[class=content title=head]
1
<div class="content" title="head"></div>
  1. p.item$*3
1
2
3
<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>
  1. p.item$$*3
1
2
3
<p class="item01"></p>
<p class="item02"></p>
<p class="item03"></p>
  1. p.item$@3*3
1
2
3
<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>
  1. p.item$@-3*3
1
2
3
<p class="item5"></p>
<p class="item4"></p>
<p class="item3"></p>
  1. div#main>div.content>p.item{text1}+p.item{text2}
1
2
3
4
5
6
<div id="main"></div>
  <div class="content">
    <p class="item">text1</p>
    <p class="item">text2</p>
  </div>
</div>