Question

我在页面上有一个文本框，我要设置样式以通过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中轻松完成？

Answer 1

使用此选择器：

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>

Answer 2

修改

试试这个：

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

虽然另一个答案选择了明显的解决方案，但测试某些样式时没有正确应用。这必须是浏览器特定的东西。所以记住这一点。 first-of-type选择器似乎最适合我。但同样，它可能无法在每个浏览器上运行。另外，我建议您将box中的所有内容设置为隐藏，并使用任一选择器将第一段视为visible的可见性。我所说的Fiddle作为一个例子。祝你好运。

CSS：将文本框设置为仅显示一个段落

2 个答案: