Sublime Text 3下Emmet使用技巧

Emmet语法

HTML

• 文档初始化
  html:5 或!：用于HTML5文档类型 ，然后按Tab键或ctrl+e：
  html:xt：用于XHTML过渡文档类型
  html:4s：用于HTML4严格文档类型

• id#|类.|属性[]|内容{},若是不带父元素,则默认为隐性生成(就近原则)

  <!-简写格式我就放在注释里面啦啦!!-->
  <!--#test.test-->
  <div id="test" class="test">

  </div>

  <!-- p#test.test  -->
  <p id="test" class="test"></p>

  <!-- a[href="http://www.baidu.com"]{文本内容--我是百度} -->
  <a href="http://www.baidu.com">文本内容--我是百度</a>

• 后代> | 兄弟+ | 上级^

<!-- div>ul>li 后代 -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

<!-- div>p+p  兄弟-->
<div>
  <p></p>
  <p></p>
</div>

<!-- div>p>ul>li>^span+b  上级-->
<div>
  <p>
    <ul>
      <li></li>
      <span></span>
      <b></b>
    </ul>
  </p>
</div>

• 分组()/乘法*/自增$/自减$@-/起序$@数字

<!-- div>ul>(li>a)*2 -->
<div>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

<!-- div>ul>(li>a{文本$$})*2 -->
<!--$是匹配数字,一个代表1开始,两个01开始,依次001-->
<div>
  <ul>
    <li><a href="">文本01</a></li>
    <li><a href="">文本02</a></li>
  </ul>
</div>

<!-- div>ul>(li>a{文本$@-})*3 -->
<!-- @-代表启用自减,降序排列   -->
<div>
  <ul>
    <li><a href="">文本3</a></li>
    <li><a href="">文本2</a></li>
    <li><a href="">文本1</a></li>
  </ul>
</div>

<!-- div>ul>(li>a{文本$@2})*5 -->
<!-- $@number 代表几号开始出现数字  -->
<div>
  <ul>
    <li><a href="">文本2</a></li>
    <li><a href="">文本3</a></li>
    <li><a href="">文本4</a></li>
    <li><a href="">文本5</a></li>
    <li><a href="">文本6</a></li>
  </ul>
</div>

CSS缩写

• 值
  1、比如要定义元素的宽度，只需输入w100，即可生成
  2、除了px，也可以生成其他单位，比如输入h10p+m5e
  单位别名列表：
  p 表示%
  e 表示 em
  x 表示 ex

• 附加属性
  1、缩写，比如 @f，可以生成：
  一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成；

• 模糊匹配
  如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

• 供应商前缀
  1、如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：
  2、可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：
  3、如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：
  前缀缩写如下：
  w 表示-webkit-
  m 表示 -moz-
  s 表示-ms-
  o 表示-o-

• 渐变输入
  lg(left, #fff 50%, #000)

下面就来看下具体的五种方式吧：

1，鼠标选中多行，按下Ctrl Shift L (Command Shift L)即可同时编辑这些行；

2，鼠标选中文本，反复按CTRL D (Command D)即可继续向下同时选中下一个相同的文本进行同时编辑；

3，鼠标选中文本，按下 Alt F3 (Win)或 Ctrl Command G(Mac)即可一次性选择全部的相同文本进行同时编辑；

4，Shift鼠标右键 (Win) 或 Option鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择；

5，Ctrl鼠标左键(Win) 或 Command鼠标左键(Mac) 可以手动选择同时要编辑。