與Zurb基金會類選擇器一起使用Emmet

我正在使用Foundation Zurbs類選擇器來構建HTML頁面。我正在使用Emmet/Zen Coding構建頁面，並且無法弄清楚如何使用Emmet Shortcuts作爲在其中包含空格的類選擇器。與Zurb基金會類選擇器一起使用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>

我怎樣寫埃米特簡碼產生：

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

問候

K *

來源

2014-10-18 Kobestarr

'large-4'和'columns'是獨立的CSS類。在HTML源代碼中，它們以空格分隔，但多個類的CSS源代碼不起作用。你有沒有試過'div.large-4.columns * 3'？ – Neil 2014-10-18 10:19:58

當然@尼爾 - 你完全正確 - 我看不到那裏的樹木。太瞭解了基金會，而不是理解我在做什麼！ – Kobestarr 2014-10-18 10:30:22

我有，當然制定了一個更簡潔的方式'。大-4柱* 3' – Kobestarr 2014-10-18 10:32:37

large-4和columns是單獨的CSS類。在HTML class屬性中，您可以在空格分隔的列表中指定它們，但在CSS中，您可以簡單地連接選擇器，例如<div class="large-4 columns">的CSS選擇器將是div.large-4.columns。假設這個簡碼需要一個CSS選擇器並生成等價的HTML，那麼您最後只需要*3。

來源

2014-11-06 11:01:30 Neil

與Zurb基金會類選擇器一起使用Emmet

回答

相關問題