如何使用CSS隐藏<dl>项？</dl>

Question

我有一个Wordpress插件生成的列表。我想简单地删除列表的第一行，即元素和CSS。

这是我的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>。

Answer 1

您是说您有多个dl并且只想删除第一个？

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

或者，您是否在dl中想要隐藏第一个dt和第一个dd？

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

或者你是说你只想删除dt和dd dt class所在的"coffee"和.coffee, .coffee+dd{display:none;} ？

{{1}}

Answer 2

如果您仍然想要第一行占用的空间，可以将其添加到您的css：

dt.coffee {
   visibility:hidden;
}

如果你想首先显示它不在那里：

dt.coffee {
   display:none;
}

如果您的定义被主要的wordpress样式覆盖，您可以检查所包含的CSS的顺序并进行更改，以便您的css是最后一个包含或使用！重要：

dt.coffee {
   display:none !important;
} 

Answer 3

为什么不把它内联？

<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> 

但它必须真正适用于您当前的代码。如果你像这样放置正确的CSS样式规则

dl {
    display: none;
}

Answer 4

这里应该有效

此处演示：http://jsfiddle.net/r5uWX/

你的CSS应该是

dl {
  display: none;
 }

并提及css路径依赖于您的代码。即使它不起作用，也可以像{/ p>一样添加!important

dl {
  display: none !important;
 }

Answer 5

例如，如果此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
       }