心血來潮想從網上看看大家分享的VSCODE快速生成代碼的技巧 發現都不是特別全面 於是略微整理了一下
VSCODE快速生成代碼
1、添加類、id、文本和屬性
（1）輸入 .box
<div class="box"></div>
（2）輸入p#text
<p id="text"></p>
（3）類和id一起輸入 .box #text
<div id="box" class="text"></div>
（4）元素和內容一塊輸出 p{你好}
<p>你好</p>
（5）輸出屬性 a[href=#]
<a>href="#"></a>
(6) 給后代設置class1 ul>.calss
<ul>
<li class="calss"></li>
</ul>
(7)給后代設置class2 table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
2、嵌套
（1）輸入div+p
<div></div><p></p>
（2）輸入ul>li*3>a
<ul>
<li></li>
<li></li>
<li></li>
</ul>
(3) >：子元素符號，表示嵌套的元素
+：同級標簽符號
3、*分組*
可以通過嵌套和括號來快速生成一些代碼塊(.foo>h1)+(.bar>h2)
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
**4、定義多個帶屬性的元素
**
1.輸入ul>li.item$*3，代碼輸出
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
2.自增符$ div.class>div.class1_$*5
<div class="class">
<div class="class1_1"></div>
<div class="class1_2"></div>
<div class="class1_3"></div>
<div class="class1_4"></div>
<div class="class1_5"></div>
</div>
3.自增 從某數開始 div.class>div.class1_$@3*4
<div class="class">
<div class="class1_3"></div>
<div class="class1_4"></div>
<div class="class1_5"></div>
<div class="class1_6"></div>
</div>
二、CSS縮寫**
1. 值
比如要定義元素的寬度，只需輸入w100，即可生成
width: 100px;
注：除了px，也可以生成其他單位
-
p 表示%
-
e 表示 em
-
x 表示 ex
2. 模糊匹配
如果有些縮寫你拿不准，Emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：
3、供應商前綴
如果輸入非W3C標准的CSS屬性，Emmet會自動加上供應商前綴，比如輸入trs，則會生成：（未實現）
1` `-webkit-transform: ; ``2` `-moz-transform: ; ``3` `-ms-transform: ; ``4` `-o-transform: ; ``5` `transform: ;
你也可以在任意屬性前加上“-”符號，也可以為該屬性加上前綴。比如輸入-super-foo：
1` `-webkit-super-foo: ; ``2` `-moz-super-foo: ; ``3` `-ms-super-foo: ; ``4` `-o-super-foo: ; ``5` `super-foo: ;
如果不希望加上所有前綴，可以使用縮寫來指定，比如-wm-trf表示只加上-webkit和-moz前綴：
-webkit-transform: ; ``-moz-transform: ; ``transform: ;
前綴縮寫如下：
w 表示 -webkit- m 表示 -moz- s 表示 -ms- o 表示 -o-
文獻參考：https://segmentfault.com/a/1190000018615760
https://www.cnblogs.com/ling-nl/p/10867510.html 如有侵權請私信我 立刻刪除