如何使用css仅显示包含在特定span标记内的文本

Question

请看下面的html。第一个句子用span标签括起来，其中包含“highlight”类。

<p><span class="highlight">The Document Object Model (DOM) is a programming interface for HTML and XML documents.</span> It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM <strong>provides a representation of the document as a structured group of nodes and objects that have properties and methods.</strong> Essentially, it <span class="blue">connects web pages to scripts or programming languages</span>.</p>

我想要设置此样式，以便只在文档中显示第一个句子的文本。所有其他句子都应该消失。我想它应该与css属性display：none;有关，但我不知道如何实现这一点？

Answer 1

也许

p span { display: none; }
p span.highlight { display: inline; }

你也可以通过“可见性”使某些东西看不见 - 但仍占用空间：

p span { visibility: hidden; }
p span.highlight { visibility: visible; }

修改嗯 - 我发现并非所有文字都在<span>标签中。如果你让整个<p>看不见但让跨度可见，我会检查会发生什么。我认为这样做不对，但我可能错了。

确定这适用于Firefox，IE8和Chrome：

p { visibility: hidden; }
p span.highlight { visibility: visible; }

Answer 2

更改您的HTML，以便在段落的其余部分中使用<span class="highlight">而不是<span class="hide">。然后在css中只有span.hide { display: none; }。