如何用CSS隱藏<dl>項目？

我有一個由Wordpress插件生成的列表。我想簡單地刪除列表的第一行，即元素並通過CSS。如何用CSS隱藏<dl>項目？

這是我的html：

<dl> 
<dt class="coffee">Coffee</dt> 
    <dd>Black hot drink</dd> 
<dt class="milk">Milk</dt> 
    <dd>White cold drink</dd> 
</dl>

我試圖display:none，但它僅適用於該<dd>。

來源

2013-06-04 CptNemo

它是dos工作http://jsfiddle.net/BBdFn/ –

對不起，我的問題是不是清楚了（太糟糕了，我不能編輯它...）無論如何，我解決它通過指定「！重要「：dd.coffee，dt.coffee {display：none！important;} – CptNemo

如果您仍然希望通過第一行所佔用的空間，你可以將它添加到你的CSS：如果你想顯示，如果它在第一個地方是不是有

dt.coffee { 
    visibility:hidden; 
}

：

dt.coffee { 
    display:none; 
}

如果您的定義被主wordpress風格覆蓋，您可以檢查包含的css的順序並更改它，以便您的css是最後包含或使用的！重要：

dt.coffee { 
    display:none !important; 
}

來源

2013-06-04 05:31:33

爲什麼不把它內聯？

<dl style="display:none;"> 
<dt class="coffee">Coffee</dt> 
    <dd>Black hot drink</dd> 
<dt class="milk">Milk</dt> 
    <dd>White cold drink</dd> 
</dl>

但它必須真正適用於您當前的代碼。如果你把這樣的

dl { 
    display: none; 
}

來源

2013-06-04 05:13:52

這裏正確的CSS樣式規則它應該工作

這裏演示：http://jsfiddle.net/r5uWX/

你的CSS應該是

dl { 
    display: none; 
}

和提CSS路徑依賴你的代碼。即使它不工作添加!important像

dl { 
    display: none !important; 
}

來源

2013-06-04 05:13:59 Selvamani

例如，如果該DL是一個div元素的孩子，你可以使用這個

div.exampleclass dl:first-child { 
     display : none 
    }

兼容性檢查此頁面 http://www.w3schools.com/cssref/sel_firstchild.asp

PS ：如果您想刪除第一個dt和dd，您必須使用此代碼：

div.exampleclass dl dt:first-child, div.exampleclass dl dd:first-child { 
      display : none 
     }

來源

2013-06-04 05:16:21

你是說你有多個dl's，你想只刪除第一個嗎？

dl:first-of-type{display:none;}

或者，你在你要隱藏的第一dt和第一dd的dl在說什麼？

dl dt:first-child, dl dt:first-child+dd{display:none;}

或者，你說你只是想在dt有class"coffee"專門去除dt和dd？

.coffee, .coffee+dd{display:none;}

來源

2013-06-04 05:20:09

如何用CSS隱藏<dl>項目？

回答

相關問題