• 随机文本的输入
  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的类名应尽量规范且统一。