在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中隱藏副系統對象

回答

相關問題