Emmet语法规则

Posted 2021-09-06 苦茶爆炸苦

html初始结构

！+ Tab

快速生成基础结构

id(#),class(.)

div#test

<div id="test"></div>

div.test

<div class="test"></div>

子节点(>),兄弟节点(+)，上级节点(^)

div>ul>li>p

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

div+ul+p

<div></div>
<ul></ul>
<p></p>

div>ul>li^div (两个 ^ ^ 就是上上级)

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

重复(*)

div5（号后面的数字就是重复的元素个数）

   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

分组(())

div>(ul>li>a)+div>p
括号里面的内容为一个代码块，表示与括号内部嵌套和外面的层级无关

 <div>
     <ul>
       <li><a href=""></a></li>
     </ul>
     <div>
       <p></p>
     </div>
</div>

属性([attr])

a[href=\'###\' name=\'xiaoA\']

<a href="###" name="xiaoA"></a>

编号($)

ul>li.test$*3

<ul>
      <li class="test1"></li>
      <li class="test2"></li>
      <li class="test3"></li>
    </ul>

ul>li*3.test$@3

<ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>

文本({})

ul>li.test$*3{测试 $}

<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

隐式标签

.test

<div class="test"></div>

ul>.test$*3

 <ul>
      <li class="test1"></li>
      <li class="test2"></li>
      <li class="test3"></li>
    </ul>

select>.test$*5

<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>