禅宗编码与孩子的多个元素

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.括号()

避免破坏您的 zen 编码 sn-p 的“流程”的好方法。请参阅this SO 帖子。

(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。父操作员^

另一种选择，正如 Sergey（他是 Emmet 的创造者，所以你可以相信他；））在 cmets 中指出的那样。

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

完整片段：

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

补充说明

没有必要在.class 名称之前包含div，您可以使用.classname，Emmet 将包含一个 div（您确实需要为其他元素指定）。更简洁的 Zen Coding sn-p 将是：

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