如何用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>项目？

回答

相关问题