- 随机文本的输入
Lorem自动输入一段随机文本(默认30个单词)，Lorem10 输入10个单词，Lorem*5 输入5遍随机文本。 - 使用“#”输入id，“.”输入class，“[]”输入属性，“{}”包裹文本
<!-- #main.content.pannel[alt=hello]{page content} -->
<view id="main" class="content pannel" alt="hello">page content</view>
多个“.”即可使用多个class
“[]”中多个属性用空格分隔
- 使用“>”输入嵌套标签，“+” 输入并列的兄弟标签，“^”上级元素
<!-- div#left{I am left}+div#right{I am right} 并列标签 -->
<div id="left">I am left</div>
<div id="right">I am right</div>
<!-- div#div1>p^div#div2 使div1往外提一层与div2同级 -->
<div id="div1">
<p></p>
</div>
<div id="div2"></div>
多个“^”即往外提多层
- 使用"()“对标签分组，解决优先级的问题
<!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) -->
<div id="list1">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="list1">
<ul>
<li></li>
<li></li>
</ul>
</div>
- 自增符号“$”
<!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] -->
<ul>
<li><img src="./imgs/001.jpg" alt="img 001"></li>
<li><img src="./imgs/002.jpg" alt="img 002"></li>
<li><img src="./imgs/003.jpg" alt="img 003"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt={img $$@4}] -->
<ul>
<li><img src="./imgs/04.jpg" alt="img 04"></li>
<li><img src="./imgs/05.jpg" alt="img 05"></li>
<li><img src="./imgs/06.jpg" alt="img 06"></li>
</ul>
<!-- div.list>div.item_$*6 -->
<div class="list">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
<div class="item_4"></div>
<div class="item_5"></div>
<div class="item_6"></div>
</div>
- 伪类选择器“:”
css命名规范
css的类名应尽量规范且统一。
