先举个例子
<div id="box">
<img src="" alt="" class="avatar">
<ul class="ul-box">
<li class="item1">我是li1</li>
<li class="item2">我是li2</li>
<li class="item3">我是li3</li>
<li class="item4">我是li4</li>
</ul>
<p class="name"></p>
</div>
像这样的代码片段,你们需要多久写出来
我只要这样写
div#box>img.avatar+ul.ul-box>li.item${我是li$}*4^p.name
是不是很爽,很快,一行代码就可以生成,id和class都对应上
id 和 class
// div#id
<div id="id"></div>
// div.test
<div class="test"></div>
子节点(>)兄弟节点(+)父节点(^)
// div>p.test
<div>
<p class="test"></p>
</div>
// div>p.test+ul>li
<div>
<p class="test"></p>
<ul>
<li></li>
</ul>
</div>
// div>p.test+ul>li^div.color
<div>
<p class="test"></p>
<ul>
<li></li>
</ul>
<div class="color"></div>
</div>
分组 (())
// div>p.test+ul>li+div.color
<div>
<p class="test"></p>
<ul>
<li></li>
<div class="color"></div>
</ul>
</div>
// div>(p.test+ul>li)+div.color
<div>
<p class="test"></p>
<ul>
<li></li>
</ul>
<div class="color"></div>
</div>
属性([])
// a[href="http://www.baidu.com" name="test"]
<a href="http://www.baidu.com" name="test"></a>
文本({})
// div>ul>li{测试}
<div>
<ul>
<li>测试</li>
</ul>
</div>
动态编号($)
从1开始自增长的编号
// div>ul>li*3${测试$}
<div>
<ul>
<li>1测试</li>
<li>2测试</li>
<li>3测试</li>
</ul>
</div>
默认隐藏标签
有层级的默认标签要出来必须给到id或者class或者属性
// .test
<div class="test"></div>
// 默认div标签
// ul>.test{测试}
<ul>
<li class="test">测试</li>
</ul>
// ul 默认 li
// select>.test{选项}
<select name="" id="">
<option class="test">选项</option>
</select>
// select 默认 option标签
// tr>.test*5
<tr>
<td class="test"></td>
<td class="test"></td>
<td class="test"></td>
<td class="test"></td>
<td class="test"></td>
</tr>
还有其他
tr可在 table、tbody、thead 和 tfoot 中做默认标签使用
等等