使用 emmet 填充列表

Question

Emmet 语法的用途是什么

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

我试过了

(ul.menu>li*4>a[href="#"]{"one","two","three","four"})

没有任何效果。

Answer 1

只需去掉圆括号即可，即：

ul.menu>li*4>a[href="#"]{"one","two","three","four"}

注意：当光标位于 emmet 语句末尾时，请记住按 Tab 键自动补全代码。

Answer 2

我意识到这是一个非常古老的问题，但只是让你知道 - 这是正确的语法。当光标位于代码末尾时，您应该按 Tab 自动完成代码。

这有帮助吗？

Answer 3

不幸的是，Emmet 不支持生成以下形式的数字：“一，二，三，...”，但它可以这样做：“1, 2, 3, ...”。所以你可以尝试这个：

ul.menu>li*4>a[href="#"]{$}

它会给你以下结果：

<ul class="menu">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>

此外，如果您想要与“一，二，三，...”形式的数字获得相同的精确结果，您必须遵循此方法

第 1 步/在代码编辑器中手动写入数字

 One
 Two
 Three
 Four

第2步/选择数字，然后按

Alt+M

在VS代码编辑器中打开带有缩写的Emmet Wrap，（可能是其他代码编辑器中的另一个快捷方式）

之后输入以下 Emmet 语法并点击

Enter

ul.menu>li>a[href="#"]*

它应该给你你想要的确切结果:)

<ul class="menu">
        <li>
          <a href="#">One</a>
          <a href="#">Two</a>
          <a href="#">Three</a>
          <a href="#">Four</a>
        </li>
</ul>