Emmet常用语法

㈠什么是 Emmet？

你可以使用类似于 CSS 选择器的语法来描述生成的树和元素属性中的元素位置。

 

㈡嵌套运算符（Nesting Operator）

嵌套运算符用于在生成的树内定位缩写元素：它是否应该放置在上下文元素内部或附近。

 

⑴子代操作符（Child）：>

 div 下有一个子代的 div，紧接着在此子代中又有一个 p 标签。

编辑器中输入：div>div>p  

效果如下：

 

⑵兄弟操作符（Sibling）：+

子代中的 div 不再包含 p 标签，而是与它成为同一级，都是父级 div 的子代。

编辑器中输入：div>div+p

效果如下：

 

 ⑶返回上级操作符（Climb-up）：^

我想要在父级元素的 div 的同级再创建一个 div 怎么办呢？这时候，我们就需要用到返回上级选择器了。

 在编辑器中输入：div>div+p^div

效果如下：

 

 一层层的嵌套后，这时候要怎么才能返回到最初的父级元素呢？这时候我们就可以多次的使用这个操作符。

在编辑器中输入：div>div>div>p^^^div

效果如下：

 

 ⑷乘法操作符（Multiplication）：*

用到重复元素最多的地方要数 ul 中的 li 了，我们可以使用乘法来解决它。

在编辑器中输入：ul>li*5      生成5个li

效果如下：

 

（5）分组操作符（Grouping）：()

这个分组是什么意思呢？很好理解，比如我们在创建一个页面结构，如果一个一个往下这么写，最后再使用 ^ 一层一层的返回上去，恐怕数数都要数晕了吧。

使用这个分组来个布局，将其分为了 header、main 和 footer 三个页面结构。

在编辑器中输入：(header>h1+div>p)+(main>p)+(footer>ul>li*3)

效果如下：

 

 我们上面还有使用 ^ 操作符来进行返回上一级的元素，使用分组，将其分为一个个的部分。

在编辑器中输入：div>(header>ul>li*2>a)+footer>p

效果如下：

 

 ㈢属性操作符（Attribute Operators）

属性运算符用于修改输出元素的属性。

 

1）ID 和 Class（ID and CLASS）

在编辑器中输入：div#header>p.news*3

效果如下：

 

如果 Class 属性不止一个，使用并列书写的原则。

在编辑器中输入：div#wrapper>div.news.news-tip.+div.news.news-content

效果如下：

 

（2）定制属性（Custom attributes）

定制的属性，使用中括号[] 来将其括起来

比如 a 标签，它默认只有 href 属性，如果我们还需要别的呢：

在编辑器中输入：a[target='' title='hello world']*3

效果如下：

 

（3）数值计算操作符（Item numbering）：$

在给 class 添加它的属性时，希望它是按照一定的数字进行排列，那么我们就可以使用这个操作符。

在编辑器中输入：div>ul>li.item-$*3

效果如下：

 

 如果你想倒着写数值的话呢，可以在 $ 操作符后面再加上 @-。

在编辑器中输入：div>ul>li.item-$@-*3

效果如下：

 

你想指定数字是从几开始，那么你需要在 $ 后面加上 @N，这里的 N 为开始的数值。

在编辑器中输入：div>ul>li.item-$@3*3

效果如下：

 

 

（4）文本操作符（Text）：{}

使用大括号 {} 来对其输入一定的内容。

在编辑器中输入：div#news>p{Hello,World!}

效果如下：

 

 当然你也可以连着别的标签写。

在编辑器中输入：p{What's your name?}+p{My name is Alice}

效果如下：

 

 最后呢 ~ 希望大家以后在书写 HTML 格式的时候使用 Emmet 语法，这样我们就可以快速地输出我们需要的模板。

 

 以上只是比较常用的emmet的常用语法，如果想了解更多可以去官网查看，下面是官网的网址：

 emmet官方文档 ： https://docs.emmet.io/cheat-sheet/

 

有关sublime text3 快捷键的相关知识可以进下面的网址了解：

https://blog.csdn.net/mrchengzp/article/details/78508509

 

参考：https://www.jianshu.com/p/9e2f55776bc0

          希望有所帮助！