前端开发Emmet语法

• 一、带有层级结构的：ul>li
• 二、代码在同级的：ul+li
• 三、带有优先级的： (ul>li)+bq
  • 对比没有优先级的：ul>li+bq
• 四、在上级的：ul>li^bq(这个可以多个^一起写)
• 五、乘号批量复制：ul>li*3
• 六、创建带有指定class样式的标签：div.box
• 七、创建带有指定id样式的标签：div#box
• 八、一个标签创建多个class：div.box1.box2.box3
• 九、一个标签同时创建class和id：div.box#box2
• 十、自定义属性内容：ul>li>a[href="#"]
• 十一、也可以自定义属性：ul>li>test[data-content="this_is_data_value"]
• 十二、文本内容填充：a{首页}
• 十三、$符号自增
• 十四、复合式的案例：ul>li[id="item$"]{第$$$条数据}*10

一、带有层级结构的：ul>li

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

二、代码在同级的：ul+li

<div style="background: rgb(1,1,1)"></div>
<ul></ul>
<li></li>

三、带有优先级的： (ul>li)+bq

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

对比没有优先级的：ul>li+bq

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

四、在上级的：ul>li^bq(这个可以多个^一起写)

<ul>
    <li></li>
</ul>
<blockquote></blockquote>
<!-- 效果是等同于(ul>li)+bq的 -->

五、乘号批量复制：ul>li*3

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

六、创建带有指定class样式的标签：div.box

<div class="box">

</div>
<!-- 或者直接 .box 也可以创建一样的 -->

七、创建带有指定id样式的标签：div#box

<div id="box">

</div>
<!-- 或者直接 #box 也可以创建一样的 -->

八、一个标签创建多个class：div.box1.box2.box3

<div class="box1 box2 box3">

</div>
<!-- 或者直接 .box1.box2.box3 也可以创建一样的 -->

九、一个标签同时创建class和id：div.box#box2

<div classs="box" id="box2">

</div>
<!-- 或者直接 .box#box2 也可以创建一样的 -->

十、自定义属性内容：ul>li>a[href="#"]

<ul>
    <li>
        <a href="#"></a>
    </li>
</ul>

十一、也可以自定义属性：ul>li>test[data-content="this_is_data_value"]

<ul>
    <li>
        <test data-content="this_is_data_value"></test>
    </li>
</ul>

十二、文本内容填充：a{首页}

<a href="">首页</a>

十三、$符号自增

1. ul>li.$*3

   • <ul>
         <li class="1"></li>
         <li class="2"></li>
         <li class="3"></li>
     </ul>

2. ul>li{第$$条项目}*3

   • <ul>
         <li>第01条项目</li>
         <li>第02条项目</li>
         <li>第03条项目</li>
     </ul>

十四、复合式的案例：ul>li[id="item$"]{第$$$条数据}*10

<ul>
    <li id="item1">第001条数据</li>
    <li id="item2">第002条数据</li>
    <li id="item3">第003条数据</li>
    <li id="item4">第004条数据</li>
    <li id="item5">第005条数据</li>
    <li id="item6">第006条数据</li>
    <li id="item7">第007条数据</li>
    <li id="item8">第008条数据</li>
    <li id="item9">第009条数据</li>
    <li id="item10">第010条数据</li>
</ul>