Question

我正在尝试zen编码，似乎无法复制我已经存在的一些HTML代码。

以下是代码：

<div class="home-page container clearfix news-article">
    <div class="box-round">
        <div class="cn tl"></div>
        <div class="cn tr"></div>
        <div class="br-title"><span></span></div>
        <div class="br-content pad15 clearfix">
            <cfoutput>#event.getView("data")#</cfoutput>
        </div>
    </div>

</div>

这是我到目前为止所做的：

div.home-page.container.clearfix.news-article > div.box-round > div.cn.tl + div.cn.tr + div.br-title > span

我猜我被困在哪里正在扩展多个项目，每个项目都有一个子元素。

具体来说：我的<div class="br-title">有一个子元素，它是一个空<span></span>（添加以查看我是否可以在zen中复制）但它还有一个“兄弟”元素<div class="br-content pad15 clearfix">本身有一个子元素。

任何建议都将不胜感激。我确实查了一些例子，并试着自己解决没有成功，所以我很好奇如何做到这一点

Answer 1

有几种方法可以做到这一点，你可以用子选择器括起元素或使用父运算符（^）：

<强> 1。 Parens ()

一种很好的方法可以避免破坏你的zen编码片段的“流程”。见this SO post。

(div.br-title > span) + (div.br-content > cfoutput)

完整代码段：

div.home-page.container.clearfix.news-article > div.box-round > div.cn.tl + div.cn.tr + (div.br-title > span) + (div.br-content > cfoutput)

<强> 2。家长运营商^

另一个选择，就像谢尔盖（他是Emmet的创造者，所以你可以信任他;））在评论中指出。

.br-title>span^.br-content>cfoutput

完整代码段：

.home-page.container.clearfix.news-article>.box-round>.cn.tl+.cn.tr+.br-title>span^.br-content>cfoutput

附加说明

您无需在div名称前加.class，只需使用.classname，Emmet将包含div（您需要指定其他元素）。一个更简洁的Zen Coding片段将是：

.home-page.container.clearfix.news-article>.box-round>.cn.tl+.cn.tr+(.br-title>span)+(.br-content>cfoutput)

禅与儿童编码多个元素

1 个答案: