Emmet外掛常用語法總結

一、HTML

1、巢狀操作

>: Child
+: Sibling
^: Climb-up
*: 乘法, 如 ul>li*5，將生成如下結果
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
(): 分組，如 (header>ul>li*2)+footer>p，結果如下
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>

2、屬性操作

ID和Class，如div#header.class1.class2.class3, 結果如下:

<div id="footer" class="class1 class2 class3"></div>

也可以自定義屬性，如td[title=”hello” colspan=3]，屬性可以不用引號，結果如下：

<td title="Hello world!" colspan="3"></td>

3、序列

結合之前的巢狀操作和屬性操作, 通過*和$可以輸出數字序列, 如ul>li.item$*3，結果如下:

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

通過@, 可以改變數字序列的順序以及基數，如ul>li$@2-*3

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

4、文字

{}: 通過大括號(curly braces)在元素中插入文字, 如a{Click me}

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

注意:a{click}+b{here} 和 a>{click}+b{here} 的區別

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

---

二、CSS

  1.  w100                   -- width:100px;

  2.  h5p                    -- height:5%;

  3.  oh / ovh /ov-h         -- overflow:hidden;
      zm1                    -- zoom:1;

  4.  o0                     -- opacity:0;
      op+                    -- opacity: ;
                                filter:alpha(opacity=);
      op:ie                  -- -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

  5.  db                     -- display:block;
      dib                    -- display:inline-block;

  6.  trf                    -- transform各種相容
      trf:sc                 -- transform:scale();
      trs                    -- transition
      bdrs                   -- border-radius及各種字首
      bxsh                   -- box-shadow

  7.  bdb                    -- border-bottom
      bdt                    -- border-top
      bdl                    -- border-left
      bdr                    -- border-right

  8.   fz                    -- font-size
       fw                    -- font-weight
       fw400                 -- font-weight:400;
       ff                    -- font-family

  9.   m-10-2-0-12           -- margin:10px 2px 0 12px;

  10.  c#0                   -- color:#000;
       cra                   -- color: rgba(0,0,0.5);

  11.  bd1-s-red             -- border:1px solid red;
       bd+                   -- border: 1px solid #000;
       bdb+                  -- border-bottom: 1px solid #000;

  12.  m0-auto-0             -- margin:0 auto 0;

  13.  lh1.6                 -- line-height:1.6;
       vam                   -- vertical-align:middle;
       tac                   -- text-align: center;
       td                    -- text-decoration:none;
       tdu                   -- text-decoration:underline;
       ti                    -- text-indent

  14.  z10                   -- z-index:10;

  15.  bg                    -- background
       bgc                   -- background-color
       bgsz:cv               -- background-size:cover;
       bg+                   -- background:#fff url() 0 0 no-repeat;

  16.  pos: a                -- position:absolute;
       pos: r                -- position: relative;
       pos: f                -- position: fixed;

  17.  fl                    -- float:left;
       fr                    -- float:right;

  18.  curp                  -- cursor: pointer;