1. >
div>ul>li
<!--转换后-->
<div>
<ul>
<li></li>
</ul>
</div>
2. +
div+p+h1
<!--转换后-->
<div></div>
<p></p>
<h1></h1>
3. ^
div>p>span^p>span
<!--转换后-->
<div>
<p><span></span></p>
<p><span></span></p>
<div>
4. #
div#box>div#content
<!--转换后-->
<div id="box">
<div id="content"></div>
</div>
5. .
div.box>div.content
<!--转换后-->
<div class="box">
<div class="content"></div>
</div>
6. []
注意:[]中的=后的值尽量以‘’或“”包围,如a[href='https://www.xxx.com'],否则转换会出问题
div[class='box' name='name' value=0 style='color:yellow']
<!--转换后-->
<div class="box" name="name" value="0" style="color:yellow"></div>
7. {}
div{内容}或者div>{内容}
<!--转换后-->
<div>内容</div>
//div>{内容}这种少用,会出问题,例如div>{内容}+div>{内容} 转换后是<div>内容<div>内容</div></div>
8. *
div*2>span*3
<!--转换后-->
<div><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span></div>
9. $
span*3{这是第$个span}
<!--转换后-->
<span>这是第1个span</span>
<span>这是第2个span</span>
<span>这是第3个span</span>
span*3(这是第$$$个span)
<!--转换后-->
<span>这是第001个span</span>
<span>这是第002个span</span>
<span>这是第003个span</span>
10. @
$@-
span*3{this is $@-}
<!--转换后-->
<span>this is 3</span>
<span>this is 2</span>
<span>this is 1</span>
$@N N表示正整数
span*3{this is $@5}
<!--转换为-->
<span>this is 5</span>
<span>this is 6</span>
<span>this is 7</span>
$@-N N表示正整数
span*3{this is $@-5}
<!--转换为-->
<span>this is 7</span>
<span>this is 6</span>
<span>this is 5</span>
11. ()
div#el.container>header>h1{this is header}^content>ul>li*5>a[href='https://www.xxx.com']{this is $@-}^^^footer>h1{this is footer}
和
div#el.container>(header>h1{this is header})+(content>ul>li*5>a[href='https://www.xxx.com']{this is $@-})+footer>h1{this is footer}
的转换后的结构一样