显示：无所有，但第一个子元素
<p><span>*</span>Here lies a note.</p>
使用CSS，我怎么能隐藏（即display:none）文本“这里躺着一个音符。”而只显示“*”？显示：无所有，但第一个子元素
既然你不能选择CSS文本节点，一个选项是设置父元素的font-size到0，这将有效地隐藏所有文本。然后，您可以重置所需元素的文本。
.target {
font-size: 0;
}
.target > :first-child {
font-size: 16px;
}<p class="target">
<span>First node</span>
Second node
More text nodes...
</p>或者，你也可以利用visibility property以及（因为你可以设置一个子元素visibility: visible即使父元素设置为visibility: hidden：
.target {
visibility: hidden;
}
.target > :first-child {
visibility: visible;
}<p class="target">
<span>First node</span>
Second node
More text nodes...
</p>作为一个侧面说明，如果你想要一个选择，你可以使用JavaScript时<span>元素包裹文本节点，然后通过设置所有的孩子元素的display不属于第一个孩子none选择：
.target > :not(:first-child) {
display: none;
}
下面是一个片段展示这种：
var target = document.querySelector('.target');
Array.from(target.childNodes).forEach(function (node, index) {
if (node.nodeType === 3 && node.nodeValue.trim()) {
var span = document.createElement('span');
span.textContent = node.nodeValue;
target.replaceChild(span, node);
}
});.target > :not(:first-child) {
display: none;
}<p class="target">
<span>First node</span>
Second node
More text nodes...
</p>如果你使用jQuery，这将是更短：
$('.target').contents()
.filter(function() {
return this.nodeType === 3 && this.nodeValue.trim();
}).wrap('<span />');.target > :not(:first-child) {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="target">
<span>First node</span>
Second node
More text nodes...
</p>
您可以使用visibility隐藏父并显示子元素。
p {
visibility: hidden;
}
p > :first-child {
visibility: visible;
}<p><span>*</span>Here lies a note.</p>最初低估了这种想法是行不通的。惊喜。整齐。 “可见度”得到了多大的支持？ （看起来我并不是唯一一个错误地被低估的人） – Eamonn
你可以在https://developer.mozilla.org/en-US/docs/Web/CSS/visibility结束时看到浏览器的兼容性。 –
它会在这里，但知名度并不总是可行的，因为空间仍然占据。 是'font-size：0'行吗？我以为我会读到一些浏览器对它不合适。 – JPM
@JPM - 是的，在使用'visibility：hidden'时它仍然会占用空间，所以我会亲自使用'font-size'选项，因为它会一直工作。这一切都取决于你想要达到的目标。 –
发现其他地方：“有些浏览器允许用户设置最小字体大小，不能被任何网站的样式表所欠缺，并且甚至有浏览器默认设置了这样的最小值（所以用户确实不必积极选择它）...所以你的标签可能会出现。“ – JPM