Question

今天我创建了一个导航栏，我会在Emmet中使用{}，我已经使用过：

div.container>main>div.header>section.top-area>nav>ul>li*4>a{Home, Contact, About, Other}

我想它会成为：

  <div class="container">
  <main>
    <div class="header">
      <section class="top-area">
        <nav>
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Other</a></li>
          </ul>
        </nav>
      </section>
    </div>
  </main>
</div>

但是我的emmet代码变成了：

  <div class="container">
      <main>
        <div class="header">
          <section class="top-area">
            <nav>
              <ul>
                <li><a href="">Home, Contact, About, Other</a></li>
                <li><a href="">Home, Contact, About, Other</a></li>
                <li><a href="">Home, Contact, About, Other</a></li>
                <li><a href="">Home, Contact, About, Other</a></li>
              </ul>
            </nav>
          </section>
        </div>
      </main>
    </div>

如何使用像我的第一个代码一样的选项？

Answer 1

首先，逐行编写列表的文本项目：

Home
Contact
About
Other

然后选择所有项目， 包含缩写 - Ctrl + Shift + A（Adobe Brackets）或Ctrl + Shift + G（Sublime Text）;

最后编写代码进行扩展：

div.container>main>div.header>section.top-area>nav>ul>li*>a{$#}

* - 重现与所选文本中的行一样多的列表元素;

{$#} - 每一行都放在元素的文本内容中。

有关此Emmet功能的更多信息→http://docs.emmet.io/actions/wrap-with-abbreviation/#wrapping-individual-lines

Answer 2

您必须分别在列表项中分配锚点。这将有效。

div.container>main>div.header>section.top-area>nav>ul>li>a[href=""]{Home}
+li>a[href=""]{Contac}+li>a[href=""]{About}+li>a[href=""]{Other}

如何在Emmet中使用{}？

2 个答案: