vscode快捷键创建div和起class名字

太长时间没用vscode编辑器了，发现很多便捷方法都忘了，找找资料后，当作笔记写在这里，共同参考~

一、嵌套 >

输入div>ul>li，按下Tab键

<div>

<ul>

<li></li>

</ul>

</div>

二、并列 +

输入div+p，按下Tab键

<div></div>

<p></p>

三、重复 *

输入li*3，按下Tab键

<li></li>

<li></li>

<li></li>

四、返回 ^

输入ul>li*3^p，按下Tab键

<ul>

<li></li>

<li></li>

<li></li>

</ul>

<p></p>

五、分组 ()

输入(ul>li*2)+p，按下Tab键<

ul>

<li></li>

<li></li>

</ul>

<p></p>

六、属性 []

如：输入div#header+div.container+div.foot#footer，按下Tab键

效果：

<div id="header"></div>

<div class="container"></div>

<div class="foot" id="footer"></div>

此外，输入input[name=user value=小李]，按下Tab键

效果：

<input type="text" name="username" value="小李">

属性值用[ ]填充，文本内容用{ }填充

在body内输入div.menu按下tab键

<div class="menu"></div>

在body内输入div#menu按下tab键

<div id="menu"></div>

在body内输入ul>li{小李}*3按下tab键

<ul>

<li>小李</li>

<li>小李</li>

<li>小李</li>

</ul>

在body内输入select>option{$}*5按下tab键

<select name="" id="">

<option value="">1</option>

<option value="">2</option>

<option value="">3</option>

<option value="">4</option>

<option value="">5</option>

</select>

在body内输入select>option[value='北京']{$}*5>a[href='#']{北京}按下tab键

<select name="" id="">

<option value="北京">1<a href="#">北京</a></option>

<option value="北京">2<a href="#">北京</a></option>

<option value="北京">3<a href="#">北京</a></option>

<option value="北京">4<a href="#">北京</a></option>

<option value="北京">5<a href="#">北京</a></option>

</select>

七、编序 $

输入ul>li.light-$*3，按下Tab键

<ul>

<li class="light-1"></li>

<li class="light-2"></li>

<li class="light-3"></li>

</ul>

八、内容 {}

如：输入ul>li{$}*3，按下Tab键

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

九、其他

在CSS中还有许多快捷输入机巧。如：

输入w100，按下Tab键，快捷输入width: 100px;

输入h100，按下Tab键，快捷输入height: 100px;

输入poa，按下Tab键，快捷输入position: absolute;

输入por，按下Tab键，快捷输入position: relative;

输入tdn，按下Tab键，快捷输入text-decoration: none;

输入db，按下Tab键，快捷输入display: block;

输入df，按下Tab键，快捷输入display: flex;

输入fdc，按下Tab键，快捷输入flex-direction: column;

输入bd1px#cccsolid，按下Tab键，快捷输入border: 1px #ccc solid;