禅与儿童编码多个元素

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编码片段的"流程".看到这篇 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.家长运营商 ^

另一个选择,谢尔盖(他是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)