Question

<p><span>*</span>Here lies a note.</p>

使用CSS，我如何隐藏（即display:none）文本“Here is a note。”并仅显示“*”？

Answer 1

由于您无法使用CSS选择文本节点，因此一个选项是将父元素的font-size设置为0，这将有效隐藏所有文本。然后，您可以重置所需元素的文本。

＆＃13;

.target {
  font-size: 0;
}
.target > :first-child {
  font-size: 16px;
}

＆＃13;

<p class="target">
  <span>First node</span>
  Second node
  More text nodes...
</p>

＆＃13;

或者，您也可以使用visibility property（因为即使父元素设置为visibility: visible，您也可以将子元素设置为visibility: hidden：

＆＃13;

.target {
  visibility: hidden;
}

.target > :first-child {
  visibility: visible;
}

＆＃13;

<p class="target">
  <span>First node</span>
  Second node
  More text nodes...
</p>

＆＃13;

作为旁注，如果您想要替代方案，可以使用JavaScript将文本节点包含<span>元素，然后设置所有不包含的子元素的display {/ 1}使用选择器的第一个孩子：

none

以下是一个演示此内容的片段：

＆＃13;

.target > :not(:first-child) {
  display: none;
}

＆＃13;

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);
  }
});

＆＃13;

.target > :not(:first-child) {
  display: none;
}

＆＃13;

如果你正在使用jQuery，它会更短：

＆＃13;

<p class="target">
  <span>First node</span>
  Second node
  More text nodes...
</p>

＆＃13;

$('.target').contents()
  .filter(function () {
    return this.nodeType === 3 && this.nodeValue.trim();
  }).wrap('<span />');

＆＃13;

.target > :not(:first-child) {
  display: none;
}

＆＃13;

Answer 2

您可以使用visibility隐藏父级和显示子元素。

＆＃13;

p {
  visibility: hidden;
}
p > :first-child {
  visibility: visible;
}

＆＃13;

<p><span>*</span>Here lies a note.</p>

＆＃13;

display：none除了第一个子元素之外的所有元素

2 个答案: