vscode代码缩写-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

六、属性添加：

（1）class填充：div#header+div.container+div.foot#footer，按下Tab键

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

（2）属性填充：input[name=user value=xx]，按下Tab键

<input type="text" name="username" value="xx">

（3）文本填充：ul>li{小李}*3按下tab键

<ul>
    <li>小李</li>
    <li>小李</li>
    <li>小李</li>
</ul>

（4）循环填充：select>option{$}*3按下tab键

<select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
</select>

（4）循环+属性填充：select>option[value='北京']{$}*3>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>
</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;

参考：https://blog.csdn.net/weixin_72155467/article/details/129355660文章来源地址https://www.toymoban.com/news/detail-498205.html

到了这里，关于vscode代码缩写的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！