Question

更新：搞砸我的CSS，与动态内容无关。 答案非常有用！

我正在创建标签并插入带把手的内容：

把手代码：

{{#each docs}}
    <article class="first"> 
        <p class="date">
            {{@date}} {{date}} 
        </p>
        <h4 class="header">{{@venue.title}} {{venue.title}}
        - {{@venue.city}} {{venue.city}}</h4>
        <p class="details">
            {{@description}} {{description}}
        </p>
    </article>
{{/each}}

如果我只是列出文章，那么CSS就可以了 - 但是当我让把手动态创建它们时，它就不适用了。

CSS代码：

div.gig-items{
    article: nth-of-type(n +2); 
    height: 0;
    padding: 0;
}

有没有办法先创建内容然后应用CSS或更优雅的解决方案？

Answer 1

每次重绘都会自动应用CSS。因此，在源代码html中插入代码或使用js动态插入代码并不重要，css将正确应用。

问题来自您的代码，它有几个错误......

首先是CSS

您希望使用类div为每个gig-items元素设置样式，但是您的模板中没有div且没有课程gig-items ...
您定义了值article的属性nth-of-type(n+2)，但这不是属性，这是一个选择器

你应该像以下一样使用它：

article:nth-of-type(n+2) {
  color: blue;
}

然后在你的车把模板中：

我假设您要按名称插入值，但是您使用的是前缀@，保留给车把的循环值，如 @index或@keys
另一个错误是你写了双把手阻止显示值。一个就够了。

插入值的正确方法是：

<p class="date">{{date}}</p>

CSS和动态内容

1 个答案: