描述
在本文中我們將展示一種新的使用仿CSS選擇器的語法來快速開發(fā)HTML的方法毒嫡。
我使用的是atom編輯器——由 Github 打造的編程開發(fā)利器，他自帶這個解析功能伊诵。當(dāng)然其他的如sublime锥腻，webstorm等都會自帶這個功能碍拆，或者使用相關(guān)的插件即可逸寓。
你在寫HTML代碼(包括所有標(biāo)簽、屬性覆山、引用竹伸、大括號等)上花費多少時間？如果你的編輯器有代碼提示功能，你編寫的時候就會容易些勋篓，但即便如此你還是要手動敲入很多代碼吧享。
比如，你這么寫譬嚣，按下tab鍵：
div#content>h1+p
然后就看到了這樣的輸出：
<div id="content">
<h1></h1>
<p></p>
</div>
用法
這里是一個支持的屬性和操作符的列表：
-
E
元素名稱(
div,p等); E#id
使用id的元素(div#content,p#intro,span#error);E.class
使用類的元素(div.header,p.error.critial). 你也可以聯(lián)合使用class和idID:div#content.column.width;E>N
子代元素(div>p,div#footer>p>span);E+N
兄弟元素(h1+p,div#header+div#content+div#footer);E*N
元素倍增(ul#nav>li*5>a);-
E$*N
條目編號 (
ul#nav>li.item-$*5);
示例
這里就針對于倍增和條目編號來舉例子吧钢颂。
元素倍增
比如你寫個li*4>a，就會生成以下HTML代碼：
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
條目編號
假設(shè)你想生成class為item1拜银、item2和item3的3個<div>元素殊鞭。你可以寫成這樣的縮寫，div.item$*3:
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
簡單吧尼桶，趕緊打開你的編輯器操練起來吧操灿！
