0

我在页面上有一个文本框，我将通过以下方式设置样式以动态包含内容dust.js：

<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>

我想设置box类的样式，以便只显示 loripsum 文本的第一段。有没有办法在 Stylus/CSS 中轻松做到这一点？

4

2 回答 2

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>
于 2013-10-30T02:45:21.930 回答
1

编辑

尝试这个：

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

尽管另一个答案选择了明显的解决方案，但在测试某些样式时没有正确应用。这必须是特定于浏览器的。所以记住这一点。选择first-of-type器似乎最适合我。但同样，它可能不适用于所有浏览器。另外，我建议您将所有内容设置box为隐藏，并使用任一选择器将第一段设为可见性visible。举个例子，我的意思是小提琴。祝你好运。

于 2013-10-30T02:34:06.767 回答