
1.1. 内嵌元素
-
>子元素如:
div>ul>li输出:
1<div> 2 <ul> 3 <li></li> 4 </ul> 5</div> -
+兄弟元素如:
div+p+bq输出:
1<div></div> 2<p></p> 3<blockquote></blockquote> -
^提升元素级次如:
div+div>p>span+em输出:
1<div></div> 2<div> 3 <p><span></span><em></em></p> 4</div>追加
^后,如div+div>p>span+em^bq输出:1<div></div> 2<div> 3 <p><span></span><em></em></p> 4 <blockquote></blockquote> 5</div>追加多个
^后,如div+div>p>span+em^^^bq输出:1<div></div> 2<div> 3 <p><span></span><em></em></p> 4</div> 5<blockquote></blockquote> -
*n重复输出 n 个元素如:
ul>li*3输出:
1<ul> 2 <li></li> 3 <li></li> 4 <li></li> 5</ul> -
()分组子元素,用以生成比较复杂的 Dom 结构如:
div>(header>ul>li*2>a)+footer>p输出:
1<div> 2 <header> 3 <ul> 4 <li><a href=""></a></li> 5 <li><a href=""></a></li> 6 </ul> 7 </header> 8 <footer> 9 <p></p> 10 </footer> 11</div>支持嵌套,如
(div>dl>(dt+dd)*2)+footer>p输出:1<div> 2 <dl> 3 <dt></dt> 4 <dd></dd> 5 <dt></dt> 6 <dd></dd> 7 </dl> 8</div> 9<footer> 10 <p></p> 11</footer>
2.2. 元素属性
-
元素的后面跟 #id 或 .class,生成元素的同时将添加指定名称的属性
如:
div#header+div.page+div#footer.class1.class2.class3输出:
1<div id="header"></div> 2<div class="page"></div> 3<div id="footer" class="class1 class2 class3"></div> -
使用
[attr]添加其它属性如:
td[title="Hello world!" colspan=3]输出:
<td title="Hello world!" colspan="3"></td>提示:
- 方括号内的属性可以添加任意多个。
- 属性也可以不指定值,如
td[colspan title]将输出<td colspan="" title=""></td>,然后使用 tab 键可依次切换属性填充值。 - 属性值用单引号或双引号都可以。
- 如果属性值没有空格,也可以不用添加引号。
-
使用 $ 给属性值编号
如:
ul>li.item$*5输出:
1<ul> 2 <li class="item1"></li> 3 <li class="item2"></li> 4 <li class="item3"></li> 5 <li class="item4"></li> 6 <li class="item5"></li> 7</ul>使用多个 $ 可填充 0 ,如
ul>li.item$$$*5输出1<ul> 2 <li class="item001"></li> 3 <li class="item002"></li> 4 <li class="item003"></li> 5 <li class="item004"></li> 6 <li class="item005"></li> 7</ul>使用
@-可以改变编号的方向(递增、递减),如ul>li.item$@-*5输出1<ul> 2 <li class="item5"></li> 3 <li class="item4"></li> 4 <li class="item3"></li> 5 <li class="item2"></li> 6 <li class="item1"></li> 7</ul>使用
@n可以修改编号的基数值,如ul>li.item$@3*5输出1<ul> 2 <li class="item3"></li> 3 <li class="item4"></li> 4 <li class="item5"></li> 5 <li class="item6"></li> 6 <li class="item7"></li> 7</ul>一个综合示例,如
ul>li.item$@-3*5输出1<ul> 2 <li class="item7"></li> 3 <li class="item6"></li> 4 <li class="item5"></li> 5 <li class="item4"></li> 6 <li class="item3"></li> 7</ul>
1.3. 元素文本内容
-
使用
{text}跟元素添加内容如:
a{Click me}输出:
<a href="">Click me</a>一个复杂点的例子,如
p>{Click }+a{here}+{ to continue}输出<p>Click <a href="">here</a> to continue</p>提示:
{text}放在紧跟着元素分隔符的右侧,则不会影响父级的 Dom 级次。如上例中的p>{Click }不会影响 > 右边的所有元素作为 p 的下级。