一分钟学会使用Emmet插件

2017-02-06  本文已影响12人  田永威

<a href="http://docs.emmet.io/abbreviations/syntax/">官方语法说明</a>
原标题:emmet插件快捷键语法精粹


最有用的只有六个,分别是:
语法:


<ul>
<li>> 子级关系</li>
<li>+ 同级关系</li>
<li>* 重复 ul>li*5</li>
<li># id</li>
<li>. class</li>
<li>[] 属性td[title="Hello world!" colspan=3]</li>
</ul>

代码示例:

<!-- child 子级关系-->
div>ul>li
<div>
    <ul>
        <li></li>
    </ul>
</div>


<!-- sibling 同级关系 -->
div+p+foot
<div></div>
<p></p>
<foot></foot>


<!-- 重复 -->
ul>li*5
<ul> 
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


<!-- # id -->
div#esbtn
<div id="esbtn"></div>


<!-- .class -->
div.navbar
<div class="navbar"></div>


<!-- [] 属性 -->
img[title='pic']
<img src="" alt="" title="pic">
上一篇下一篇

猜你喜欢

热点阅读