Emmet for Sublime Text

Emmet for Sublime Text

Emmet Documentation


 功能

一、Abbreviations (縮寫)

Syntax(語法)類似 CSS 選擇器

元素:  可使用html的tag


巢狀運算子

運算子	符號	範例
Child	>	div>ul>li
Sibling	+	div+p+bq
Climb-up	^	div>p>span+em^bq
Multiplication	*	ul>li*5
Grouping	()	div>(header>ul>li*2>a)+footer>p

屬性運算子

1.ID and CLASS

   id   :  #        div#header

   class :   .     div.page / div#footer.class1.class2.class3

2.客製化屬性[attr]

   td[title="Hello world!" colspan=3]

3.項目編號: $

  ul>li.item$*5

  ul>li.item$$$*5

改變基礎值 @

改變升冪，降冪 @-

ul>li.item$@-5 降冪五項 5to1

ul>li.item$@3*5 從3開始升冪五項 3to7

ul>li.item$@-3*5 降冪基礎值3五項 7to3

內文 {Text}

a{Click me} -> <a href="">Click me</a>