php emment,Emmet常用语法 - osc_w55yykyo的个人空间 - OSCHINA - 中文开源技术交流社区...

㈠什么是 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的常用语法，如果想了解更多可以去官网查看，下面是官网的网址：

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

希望有所帮助！