css 的缩写形式,用缩写形式包装已有内容《 Emmet：HTML 与 CSS 缩写 》

我们可以使用 emmet 提供的缩写形式去包装已有的内容 …. 用到的快捷键是 shift + command + a …

这里有一段文字，不用在意当前位置是在哪一行 … 按一下 shift + command + a …

输入 div.container … 回车 …

会一个组带 .container 类的 div 标签包装这段文字 …

单独行

我们也可以单独为每一行添加一个包装 …

位置可以随便在哪一行 … 按下 shift + command + a …. 输入 ul>li* … 注意 * 号后面不用加具体的重复的次数 … emmet 会自动给我们算好 … 按一下 ok 或者 回车键 …

你会看到，会用列表元素包装每一行内容 …

去掉列表符号

这里每行前面都有一个小星号，在包装的时候我们可以去掉内容前面的这个小星号或者序号… (撤回)

shilft + command + a … ul>li* … 后面加上一个 |t … 这个小 t 就是 trim 的简写 … 就是修整的意思 …

在每行内容周围包装了指定的元素，同时去掉了每行内容前面的小星数 …

控制输出

在为已有内容添加包装元素的时候，我们可以控制内容的输出的位置，可以在缩写语法里面，使用 $# 来表示内容 … 也就我们可以使用 $# 把内容放在任何地方 …

shift + command + a … 一组 ul 标签，里面是 li 子元素 … 给它添加一个 title 属性 … 属性的值就是当前行的内容 … 所以这里可以用一个 $# …

后面加上一个 * 号 … 然后为 li 元素添加了一个文本类型的节点 … 节点的内容就是当前行的内容 … 文字节点的内容要放在大括号里 … 里面用 $# 表示当前行内容 …

ul>li[title=$#]*>{$#}

得到的结果就是每行内容被 li 元素包装， li 元素上的 title 属性的值是当前行的内容 …