id指令:# ; class指令:.

1
2
3
4
5
//div#test
<div id="test"></div>

//div.test
<div class="test"></div>

子节点指令:> ; 兄弟节点指令:+ ; 上级节点:^

div>ul>li>p

1
2
3
4
5
6
7
<div>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
 </div>

div+ul+p

1
2
3
<div></div>
<ul></ul>
<p></p>

ul>li^div

1
2
3
4
5
6
<div>
   <ul>
     <li>
     </li>
   </ul>
 </div>

重复（*）

div*3

1
2
3
<div></div>
<div></div>
<div></div>

编号（$）

div>ul>li.test$*3

1
2
3
4
5
6
7
<div>
  <ul>
    <li class="test1"></li>
    <li class="test2"></li>
    <li class="test3"></li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//带有层级结构的：ul>li
	<ul>
		<li></li>
  </ul>

//ul>li{消息$}*4
	<ul>
    <li>消息1</li>
    <li>消息2</li>
    <li>消息3</li>
    <li>消息4</li>
	</ul>

//创建带有指定class样式的标签：div.box
	<div class="box"></div>

//文本内容填充：a{首页}
<a href="">首页</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
隐式标签：

>   .class
    <div class="class"></div>

>   #id
    <div id="id"></div>

>   ul>.class
    <ul>
        <li class="class"></li>
    </ul>

>   label[for='content']>#content
    <label for="content">
        <span id="content"></span>
    </label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$符号自增

    ul>li.$*3
    <ul>
        <li class="1"></li>
        <li class="2"></li>
        <li class="3"></li>
    </ul>

    ul>li{第$$条项目}*3
    <ul>
        <li>第01条项目</li>
        <li>第02条项目</li>
        <li>第03条项目</li>
    </ul>

最后来个复合式的案例：

    ul>li[id='item$']{第$$$条数据}*10
    <ul>
        <li id="item1">第001条数据</li>
        <li id="item2">第002条数据</li>
        <li id="item3">第003条数据</li>
        <li id="item4">第004条数据</li>
        <li id="item5">第005条数据</li>
        <li id="item6">第006条数据</li>
        <li id="item7">第007条数据</li>
        <li id="item8">第008条数据</li>
        <li id="item9">第009条数据</li>
        <li id="item10">第010条数据</li>
    </ul>