在CSS中隐藏副系统对象

我试图设计一个网页中我没有控制权的元素（想想userscript）。我有HTML像这么一大块：在CSS中隐藏副系统对象

<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以外的所有重要环节？我想将显示设置为无，但一旦dt未显示，则无法重新显示其子项。我不仅仅想将文字设置为visibility:invisible，因为它很长（整个过程就是减少滚动）。

任何想法？

来源

2013-12-19 Charles

你可以在设置字体大小dt到0（隐藏文本节点），隐藏.unimportant-link，然后重新设置字体大小的.important-link （覆盖0字体大小，否则它会继承）。

dt { 
    font-size: 0; 
} 

dt .unimportant-link { 
    display: none; 
} 

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

你可以选择使用visibility: hidden;，如果你想通过.unimportant-link所占用的空间留（而不是通过display: none;从流通中取出）。

Fiddle

来源

2013-12-19 15:35:10 ajp15243

如果你试试吧：

dt * { 
    display: none; 
} 

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

来源

2013-12-19 15:30:54 ke20

（非常长）文本不在包含元素中，因此这不会隐藏它。 – Charles

请注意，visibility：hidden将仍然为隐藏对象保留空间。使用display：none不会保留空间。 http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – tjboswell

@Charles如果你想隐藏文本，你需要把它包装成一些东西然后。 div，p等。否则，隐藏它的唯一方法是隐藏整个dt。 – tjboswell

基于这样的事实，你有没有包装元素文本节点，只有一个办法，我看这会对工作。您需要设置dt的高度等于您的.important-link的字体大小。

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

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

来源

2013-12-19 16:07:14 paceaux

在CSS中隐藏副系统对象

回答

相关问题