在CSS中隐藏附属对象

我正在尝试为我无法控制的网页元素设置样式（想想userscript）。我有一大块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

中的所有内容？我想将display设置为none，但一旦

dt

未显示，它就无法重新显示其子项。我不仅仅想将文本设置为

visibility:invisible

，因为它很长（关键是要减少滚动）

有什么想法吗？

如果你想试试：

dt * {
    display: none;
}

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

---

您可以将

dt

中的字体大小设置为

0

（隐藏文本节点），隐藏

不重要的链接

，然后在

重要链接

上重新设置字体大小（覆盖它将继承的

0

字体大小）

您也可以使用

可见性：隐藏

如果希望

占用的空间。不重要的链接

保留（而不是通过

显示：无；

将其从流中删除）

---

基于文本节点没有包装元素这一事实，我认为只有一种方法可行。您需要将

dt

的高度设置为等于

的字体大小。重要链接

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

---

这有效地将第一个链接设置为“块级别”，然后“切断”所有剩余文本。如果您想在稍后的会话中撤消此操作，可以设置

高度：auto

，删除

溢出：hidden

，或同时设置两者

该（很长）文本不在包含元素中，因此这不会隐藏它。请注意，visibility:hidden仍将为隐藏对象保留空间。使用显示：无将不保留空间@查尔斯如果你想隐藏文本，你需要把它包装成某种东西。div、p等。否则，隐藏它的唯一方法就是隐藏整个dt。@teabos：正如我在问题中所说的，我不能控制HTML，只能控制CSS。@teabos不一定，请参阅。

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