Emmet常用的8种语法形式 10.14

Emmet常用的8种语法形式

1.标签与内容

<!--h3{html是结构化标签语言}-->
<h3>html是结构化标签语言</h3>
<!--.title{默认标签div}-->
<div class="title">默认标签div</div>
<!--#title{默认标签div}-->
<div id="title">默认标签div</div>

2.属性和语法糖

id,class是高频,通用属性

<!-- [id=app]{app} -->
<div id="app">app</div>
<!-- [class=title]{title} -->
<div class="title">title</div>

id快捷输入是#，class是.

<!-- #app{app1} -->
<div id="app">app1</div>
<!-- .title{title1} -->
<div class="title">title1</div>

3.重复

多出现在表格，用*表示

<!-- .container{box}*3 -->
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>

4.父子

父子关系通常用 > 来表示

<!-- ul>li{item}*3 -->
<ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>

5.兄弟

兄弟关系通常用 + 来表示

<!-- h3{标题}+p{内容} -->
<h3>标题</h3>
<p>内容</p>

6.父级

父级关系通常用 ^ 来表示

    <!-- .box>span{text}^h3{小标题} -->
    <div class="box">
    <span>text</span>
    </div>
    <h3>小标题</h3>

7.分组

<!-- nav>h3{导航}+ul>li*3>a{link} -->
**为了写法更加规范直观，有如下写法**
<!-- nav>h3{导航}+(ul>li*3>a{link}) -->
<nav>
        <h3>导航</h3>
        <ul>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
        </ul>
    </nav>

8.序号

默认从1开始

<!-- ul>li{item-$}*3 -->
<ul>
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
    </ul>

从自定义序号开始

<!-- ul>li{item-$@3}*3 -->
<ul>
        <li>item-3</li>
        <li>item-4</li>
        <li>item-5</li>
    </ul>

逆序

  <!-- ul>li{item-$@-1}*3-->
  <ul>
        <li>item-3</li>
        <li>item-2</li>
        <li>item-1</li>
    </ul>