综合例子：
page>div.logo+ul#navigation>li*5>a{Item $}
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
基础例子
- div>ul>li >用来实现嵌套的标签
<div>
<ul>
<li></li>
</ul>
</div>
-
div+p+bq + 用来实现同级别的标签
<div></div>
<p></p>
<blockquote></blockquote> -
div+div>p>span+em^bq 创建上一个标签的父级同等的标签
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div> -
div+div>p>span+em^^^bq 几个^表示向上走多少层
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote> -
ul>li*5 *表示一个标签重复出现的次数
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> -
div>(header>ul>li*2>a)+footer>p 更复杂的需要组的概念 用（）创建 内部规则和外部相同
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
- (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>
- div#header+div.page+div#footer.class1.class2.class3 类名和id名通过在标签后直接写入即可
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
9 . td[title="Hello world!" colspan=3] 属性名的添加
<td title="Hello world!" colspan="3"></td>
-
ul>li.item
$在具体实现的收会被具体的顺序数字所替换 不管是在类名中 还是在内容中
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul> -
ul>li.item$$$*5 相邻的$如果顺序值不够给与数值 则会被视作0
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
-
ul>li.item$@-*5 使用@可以改变数字的顺序 @-表示逆序
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul> -
ul>li.item$@3*5 表示从第几位开始
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
14.a{Click me} {}用来给标签内部写入文本
<a href="">Click me</a>
<p>Click <a href="">here</a> to continue</p>
p>{Click }+a{here}+{ to continue}
- 注意 你为了美化可能会使用格式化代码 比如加入空格等 这种方式 不被支持
(header > ul.nav > li*5) + footer
网友评论