Question

我正在尝试设置一个我无法控制的网页元素（想想用户脚本）。我有一大堆像这样的HTML：

<dt>
  <a href="..." class="important-link">important text</a>
  Long unimportant text that doesn't matter to me.
  <a href="..." class="unimportant-link">this doesn't matter either</a>
</dt>

除了重要的链接外，如何隐藏dt中的所有内容？我想将显示设置为none，但是一旦dt未显示，它就无法重新显示其子项。我不仅要将文本设置为visibility:invisible，因为它很长（整个过程就是减少滚动）。

有什么想法吗？

Answer 1

您可以将dt中的字体大小设置为0（隐藏文本节点），隐藏.unimportant-link，然后重新设置.important-link上的字体大小1}}（覆盖否则将继承的0字体大小。）

dt {
    font-size: 0;
}

dt .unimportant-link {
    display: none;
}

dt .important-link {
    font-size: 16px;
}

如果您希望visibility: hidden;占用的空间保留（而不是通过.unimportant-link将其从流中删除），您也可以使用display: none;。

<强> Fiddle

Answer 2

基于你有一个没有包装元素的文本节点的事实，我看到的只有一种方法可行。您需要将dt的高度设置为等于.important-link的字体大小。

dt{
  height: 1em;
  overflow:hidden;
  }
dt .important-link{
    font-size: 1em;
    display:block;
}

这有效地将第一个链接设置为“块级别”，然后“切断”所有剩余文本。如果您希望稍后在会话中撤消此操作，则可以设置height: auto，删除overflow:hidden或两者。

Answer 3

如果您尝试：

dt * {
    display: none;
}

dt *.important-link {
    display: inline;
}

在CSS中隐藏paraphyletic对象

3 个答案: