emmet语法简介及在Vscode中使用Emmet快速编辑代码

2022-06-14 08:28:58 浏览数 (2)

4、嵌套操作符(Nesting operators)

嵌套操作符用于将缩写元素放置在生成的树中,是否应放置在上下文元素的内部或附近.

子级:>

通过>标识元素可以生成嵌套子级元素,可以配合元素属性进行连写

代码语言:javascript复制
Copydiv#pageId>ul>li 
=> 
<div id="pageId">
    <ul>
        <li></li>
    </ul>
</div>

同级:

字符表示生成兄弟级元素.

代码语言:javascript复制

Copydiv#pageId div.child
=>
<div id="pageId"></div>
<div class="child"></div>

父级:^

用于生成父级元素的同级元素,从这个

字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素.

代码语言:javascript复制
Copydiv>p.parent>span.child^ul.brother>li
=>
<div>
    <p class="parent"><span class="child"></span></p>
    <ul class="brother">
        <li></li>
    </ul>
</div>

5、分组操作符(Grouping)

分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级.

代码语言:javascript复制
Copydiv>(ul>li span)>a
=>
<div>
    <ul>
        <li></li>
        <span></span>
    </ul>
    <a href=""></a>
</div>

6、乘法(Multiplication)

使用N即可自动生成重复项.N是一个正整数.在使用时请注意N所在位置,位置不同生成的结果不同.

代码语言:javascript复制

Copyul>li*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

7、自动计数(numbering)

这个功能挺方便的对于生成重复项时增加一个序号,只需要加上$符号即可.

代码语言:javascript复制
Copyul>li.item${item number:$}*3
<ul>
    <li class="item1">item number:1</li>
    <li class="item2">item number:2</li>
    <li class="item3">item number:3</li>
</ul>

6

如果生成两位数则使用两个连续的$, 更 多 位 数 以 此 类 推 . . . 使 用 @ 修 饰 符 , 可 以 更 改 编 号 方 向 ( 升 序 或 降 序 ) 和 基 数 ( 例 如 起 始 值 ) . 注 意 这 个 操 作 符 在 ,更多位数以此类推... 使用@修饰符,可以更改编号方向(升序或降序)和基数(例如起始值).注意这个操作符在,更多位数以此类推...使用@修饰符,可以更改编号方向(升序或降序)和基数(例如起始值).注意这个操作符在之后添加

@-表示降序,@ 表示升序,默认使用升序.

@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到±符后.

代码语言:javascript复制
Copyul>li.item$@-*3
=>
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
---------------------------
ul>li.item$@-10*3
=>
<ul>
    <li class="item12"></li>
    <li class="item11"></li>
    <li class="item10"></li>
</ul>

0 人点赞