【Emmet】語法規則
阿新 • • 發佈:2022-04-01
以上程式碼你需要多久打出來?
我只需要幾秒鐘,寫好下面這條語句,按下鍵盤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{測試$} ({裡面填寫內容,可以和$一起組合使用哦})