2

我正在尝试 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

而且我想我被困在哪里是扩展多个项目，每个项目都有一个子元素。

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

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

4

1 回答 1

8

有几种方法可以做到这一点，您可以使用子选择器将元素括起来或使用父运算符 ( ^)：

1. 括号()

避免破坏您的禅宗编码片段的“流程”的好方法。请参阅此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 的创造者，所以你可以相信他；））在评论中指出的那样。

.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姓名之前包含，您可以使用.classnameEmmet 将包含一个 div（您确实需要为其他元素指定）。一个更简洁的 Zen Coding 代码片段是：

.home-page.container.clearfix.news-article>.box-round>.cn.tl+.cn.tr+(.br-title>span)+(.br-content>cfoutput)
于 2013-05-24T17:06:38.687 回答