如何将css样式应用于流星中的模板

Question

<template name="userPill"> 
    <span>{{Zipcode}}</span> 
    <span>{{City}}</span> 
</template> 

以上模板正在用于流星自动完成。我需要的是位于列表周围的容器上的垂直滚动条，因此用户可以滚动浏览这些值。将不胜感激任何帮助。

感谢

Answer 1

的template标签没有在DOM存在，所以你不能依赖它的CSS。如果您需要针对该模板具体为（而不是增加一般类的元素），最好的办法是来包装其内容在一个div像这样：

<template name="userPill"> 
    <div class="user-pill"> 
    <span>{{Zipcode}}</span> 
    <span>{{City}}</span> 
    </div> 
</template> 

然后你就可以在你的CSS的目标是：

.user-pill { 
    color: red; 
} 

在较大的项目中，我更喜欢使用双下划线来标​​识模板的类名，例如<div class="__user-pill">。它可能看起来有点难看，但我发现确定发生了什么真的很有帮助。

---

基于您的评论，它看起来像你需要的风格userPill的容器。比方说，你有这样的一个模板：

<template name="userPillContainer"> 
    <div class="user-pill-container"> 
    {{> userPill name="home"}} 
    {{> userPill name="about"}} 
    {{> userPill name="profile"}} 
    </div> 
</template> 

那么您可以定位为与上述相同的方式容器：

.user-pill-container { 
    border: 1px solid black; 
}