2013-10-30 65 views
0

我通过dust.js有我要的风格动态包含内容的页面上的文本框:CSS:样式的文本框,只显示一个段落

<div class="box"> 
    {Lorem} 
</div> 

它将与内容填充的将已经在它的HTML标签:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

我想,这样只显示文本loripsum的第一款样式的box类。在Stylus/CSS中有一种方法可以轻松实现吗?

回答

1

编辑


试试这个:

.box > p:first-of-type 
    visibility visible 

虽然对方的回答选择了明显的解决方案,而没有被正确应用测试某些风格。这必须是浏览器特定的。所以记住这一点。 first-of-type选择器似乎最适合我。但是,它可能不适用于每个浏览器。此外,我建议您将box中的所有内容都设置为隐藏状态,并使用任一选择器将第一段作为visible的可见性。我的意思是作为例子包含的Fiddle。祝你好运。

2

使用此选择器:

div.box p:first-child 

实施例:(仅示出第一段)

<style> 
    div.box p:not(:first-child){display:none;} 
</style> 
<div class="box"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div>