安装成功图片

emmet

一、id和class

  1. #id 
  2. <div class="id"></div>
  4. .class
  5. <div class="class"></div>

二、文本

  1.  p{text}
  2.  <p>text</p>

三、层级

1.子元素

  1. div > p > a
  2. <div>
  3.       <p><a href=""></a></p>
  4. </div>

2.兄弟元素

  1. div + p + a
  2. <div></div>
  3. <p></p>
  4. <a href=""></a>

3.父级元素

  1. div>p^a
  2. <div>
  3.       <p></p>
  4. </div>
  5. <a href=""></a>

四、重复 *n

  1. ul > li*3 > a{item}
  2. <ul>
  3.       <li><a href="">item</a></li>
  4.       <li><a href="">item</a></li>
  5.       <li><a href="">item</a></li>
  6. </ul>

五、分组 （）

  1. div>h2{购物车}+(ul>li*3>a{item})+p{总价:3件}
  2. <div>
  3.       <h2>购物车</h2>
  4.       <ul>
  5.         <li><a href="">item</a></li>
  6.         <li><a href="">item</a></li>
  7.         <li><a href="">item</a></li>
  8.       </ul>
  9.       <p>总价:3件</p>
  10. </div>

六、属性

  1. a[href="https://php.cn"]{php中文网}
  2. <a href="https://php.cn">php中文网</a>

七、序号

1.$

  1. ul>li{item$}*3
  2. <ul>
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li> 
  6. </ul>

2.$$…

  1. ul>li{item$$$}*3
  2. <ul>
  3.       <li>item001</li>
  4.       <li>item002</li>
  5.       <li>item003</li>
  6. </ul>

3.@n

  1. ul>li{item$@5}*3
  2. <ul>
  3.       <LI>item5</LI>
  4.       <LI>item6</LI>
  5.       <LI>item7</LI>
  6.  </ul>
  7. ul>li{item$@-5}*3 
  8. <ul>
  9.       <li>item7</li>
  10.       <li>item6</li>
  11.       <li>item5</li>
  12. </ul>

隐式标签

一级标签省略，默认为div .site{php}

  1. <div class="site">php</div>

二级标签省略，则由一级标签决定

  1. ul.list>.item*3
  2. <ul class="list">
  3.       <li class="item"></li>
  4.       <li class="item"></li>
  5.       <li class="item"></li>
  6. </ul>
  7. select>.item*3
  8. <select name="" id="">
  9.       <option class="item"></option>
  10.       <option class="item"></option>
  11.       <option class="item"></option>
  12. </select>

<table/>,<tbody>,<thead>默认子标签都是<br>

  1. table>.row*3>.col*2
  2. <table>
  3.       <tr class="row">
  4.         <td class="col"></td>
  5.         <td class="col"></td>
  6.       </tr>
  7.       <tr class="row">
  8.         <td class="col"></td>
  9.         <td class="col"></td>
  10.       </tr>
  11.       <tr class="row">
  12.         <td class="col"></td>
  13.         <td class="col"></td>
  14.       </tr>
  15. </table>

<tr>默认子标签是<td>

  1. tr>.item*4
  2. <tr>
  3.       <td class="item"></td>
  4.       <td class="item"></td>
  5.       <td class="item"></td>
  6.       <td class="item"></td>
  7.  </tr>

并非所有父子组合都有这样的定义，列如<dl><dt>就没有

更多相关文章

  1. iframe获取子级和父级元素
  2. php操作redis命令及代码实例大全
  3. HTML常用元素样式、定位学习与应用
  4. CSS伪类选择器、box-sizing属性、常用单位、媒体查询
  5. 1. 变量,常量的区别; 2. 函数的种类与参数类型; 3. 作用域与闭包
  6. 1. 实例演示解构赋值,特别是函数参数中使用解构的方式2. dom元素
  7. 原生Js增删改查及解构赋值
  8. JavaScript实现留言板添加删除留言
  9. box-sizing、伪类选择器参数及媒体查询的应用

随机推荐

  1. android之四大组件之一-Activity（三）
  2. Android模拟器及编译环境安装新手入门-3
  3. Jni/C for android 技术总揽
  4. 英特尔® Android* USB 驱动程序安装说明
  5. android studio创建模拟器报错解决 emula
  6. 【Android】高效ListView
  7. linux学习笔记《一.烧写篇_android》
  8. Android各种资源详解
  9. repo使用
  10. 用Android NDK r6编译boost 1.47