欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Emmet/Zen Coding 快速入门说明_html/css_WEB-ITnose

程序员文章站 2022-05-01 22:22:19
...

快速参考

以下是支持的特性:

ele creates an HTML element tag
展开一个HTML元素标签
# creates an id attribute
作用于元素标签,展开一个id属性
. creates a class attribute
作用于元素标签,展开一个类属性,一个标签可以跟多个类属性,最终展开会一起呗加入class属性中
[] creates a custom attribute
作用于元素标签,展开一个HTML元素标签的属性,可以是任意非标准属性名称,写法同CSS选择器。
> creates a child element
作用于元素标签或组,紧跟展开一个子元素标签或组,参考CSS选择器
+ creates a sibling element
作用于元素标签或组,紧跟展开一个兄弟元素标签或组,参考CSS选择器
^ climbs up
作用于元素标签或组,紧跟的元素标签或组爬升到上一个层级
* is element multiplication. This creates the same thing n number of times
作用于元素标签或组,展开重复次数,后面跟一个数字。
$ is replaced with an incremental number
配合*使用,代表拷贝的序号
$$ is used for numbers with padding
序号占位,用0填充
{} creates text in an element
展开为文本
() as a group
将标签组作为一组,可嵌套。

ID和类属性:#and.

div#contentRegion.address

自定义属性:[]

div[title]

也可以包含属性值

input[placeholder="Name" type="text"]

子组:>

div#menu>span.item[title]

兄弟组:+

footer>div>a+input

爬升:^

footer>div>a+input^p

重复次数:*

ul>li*4>span

重复序号:$

section>article.item$$*4

文本:{}

ul>li*4>span{Caption $$}
  • Caption 01
  • Caption 02
  • Caption 03
  • Caption 04

组:()

((a+span)+(a>span))*3