在章中，我介紹了一種使用類似css的選擇器語法的快速編寫html代碼的新方法-一組用于高速HTML和CSS編碼的便捷工具。
您花費多少時間編寫HTML代碼：所有這些標記，屬性，引號，花括號等。如果您選擇的編輯器具有代碼補全功能，則您會更輕松，但是您仍然需要進行大量鍵入操作。
但是，如果您不僅可以使用CSS選擇器來樣式化和訪問元素，還可以生成代碼怎么辦？例如，如果您可以寫這個呢？
div#content>h1+p
…并將其視為輸出？
現(xiàn)在，讓我們看看這些工具是如何工作的。
展開縮寫
擴展縮寫功能將類似CSS的選擇器轉換為XHTML代碼。術語“縮寫”可能有些混亂。為什么不將其稱為“ CSS選擇器”呢？好吧，第一個原因是語義上的：“選擇器”意味著選擇某些內容，但是在這里，我們實際上是在生成某些內容，編寫了較長代碼的較短表示。其次，除了引入一些新的運算符之外，它僅支持真正的CSS選擇器語法的一小部分。
以下是受支持的屬性和運算符的列表：
- E元素名稱（div，p）;
- E·ID元素具有標識符（div#content，p#intro，span#error）;
- E.class使用類的元素（div.header，p.error.critial）。您可以結合類和ID，也：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）；
如您所見，您已經知道如何使用：只需編寫一個類似CSS的簡單“縮寫”，就像這樣……
div#header>img.logo+ul#nav>li*4>a
…然后調用“擴展縮寫”操作。
有兩個自定義運算符：元素乘法和項目編號。例如，如果要生成五個<li>元素，則只需編寫li*5。它將重復所有后代元素。如果您需要四個<li>元素，<a>每個元素中都有一個，則只需編寫li*4>a，它將生成以下輸出：
當您想用其索引標記重復的元素時，使用最后一個項目編號。假設你想生成三個<div>的元素item1，item2和item3類。您可以寫這個縮寫div.item$*3：
只需在要顯示索引的class或ID屬性中的任意位置添加一個美元符號，即可。所以這…
div#i$-test.class$$$*5
將被轉換為：
您會看到在輸入a縮寫時，輸出為<a href=“”></a>。或者，如果您編寫img，輸出為<img src=“” alt=“” />。
