将Emmet与Zurb Foundation Class选择器一起使用

Question

我正在使用Foundation Zurbs类选择器来构建HTML页面。 我正在使用Emmet / Zen编码来构建页面，但无法弄清楚如何将Emmet快捷方式用于其中有空格的类选择器。

因此，在下面阐明Emmet简码：

div.large-4*3

产生代码

<div class="large-4"></div>
<div class="large-4"></div>
<div class="large-4"></div>

但是，Zurb类选择器的顺序为“”

"large-4 columns"

如果我尝试在以下短代码语法中使用此类选择器

div.large-4 columns*3

它产生以下HTML

div.large-4 <columns></columns>
<columns></columns>
<columns></columns>

我如何编写产生的Emmet简码：

<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>

问候

K *

Answer 1

large-4和columns是单独的CSS类。 在HTML class属性中，您可以使用空格分隔的列表来指定它们，而在CSS中，只需将选择器连接起来即可，例如<div class="large-4 columns">的CSS选择器将为div.large-4.columns 。 假设此短代码采用CSS选择器并生成等效的HTML，则最后只需要*3 。