emmet-前端开发神器的几种写法

*常用：类: .  ，id:  #

div.a+div#a
<div class="a"></div>
<div id="a"></div>

 

 1.使用 > 生成元素子节点

div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

 


2.使用 + 生成元素兄弟节点
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

 

3.操作符 ^ 的作用和 > 刚好相反

p>span^bq




<p><span></span></p>
<blockquote></blockquote>




4.Multiplication: *


ul>li*3




<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>




5.Grouping: ()


div>(div>a)+footer




<div>
    <div><a href=""></a></div>
    <footer></footer>
</div>





6.自定义属性[attr]


div[data=1]




<div data="1"></div>




7.元素编号$


ul>li.item$*3




<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>




ul>li.item$$*3




<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>




8.更灵活的编号方式@


ul>li.item$@-*3




<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>




在 $ 后面添加 @N 可以改变编号基数


ul>li.item$@2*4




<ul>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>




ul>li.item$@-2*4




<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
</ul>




9.文本操作符,Text:{} 给元素添加文本内容,在Emmet中是被当成单独的元素来解析的


a{Click me}




<a href="">Click me</a>




<!-- a{click}+b{here} -->






<a href="">click</a><b>here</b>




<!-- a>{click}+b{here} -->




<a href="">click<b>here</b></a>




 


这篇记录不错
https://www.cnblogs.com/summit7ca/p/6944215.html


 


 


 


 


 


 




 










							

   
版权声明：本文为alanaZ原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。



本文链接：https://www.cnblogs.com/alanaZ/p/9013193.html