1. 程式人生 > 其它 >【Emmet】語法規則

【Emmet】語法規則

 

 

 以上程式碼你需要多久打出來?

我只需要幾秒鐘,寫好下面這條語句,按下鍵盤Tab鍵即可看到上圖中的結構了

 

 

 

id(#),class(.)

 

 

 

 

 

 

子節點(>),兄弟節點(+),上級節點(^)

div>ul>li>p

 

 

 

div+ul+p

 

 

 

div>ul>li^div (這裡的^是接在li後面所以在li的上一級,與ul成了兄弟關係,當然兩個^^就是上上級)

 

重複(*)

div*5(*號後面新增數字表示重複的元素個數)

 

 

 

分組(())

div>(ul>li>a)+div>p
(括號裡面的內容為一個程式碼塊,表示與括號內部巢狀和外面的的層級無關)

 

 

 解釋:這裡如果不加括號的話,猜想下,a+div這樣div就是和a是兄弟關係了,會包含在li裡面

 

 

 

屬性([attr])——id,class都有怎麼能少了屬性呢

a[href=’###’ name=‘xiaoA’] (中括號內填寫屬性鍵值對的形式,並且空格隔開)

 

 

ul>li.test$*3 ($代表一位數,後面更上*數字就代表從1遞增到填寫的數字)

 

 

如果想自定義從幾開始遞增的話就利用:$@+數字*數字
例如:ul>li.test$@3*3

 

 

文字({})

ul>li.test$*3{測試$} ({裡面填寫內容,可以和$一起組合使用哦})