html - 如何隐藏一个
带有 CSS 的项目？

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

score 5 · Accepted Answer

Are you saying you have multiple dl's and you want to delete only the first one?

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

Or, are you saying in the dl you want to hide the first dt and the first dd?

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

Or are you saying you just want to remove specifically the dt and dd where the dt has the class "coffee"?

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

score 2 · Accepted Answer

如果您仍然希望第一行占用的空间，您可以将其添加到您的 CSS：

dt.coffee {
   visibility:hidden;
}

如果您想显示它一开始就不存在：

dt.coffee {
   display:none;
}

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

dt.coffee {
   display:none !important;
}

score 1 · Accepted Answer

为什么不把它内联？

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

score 0 · Accepted Answer

在这里它应该工作

这里的演示：http: //jsfiddle.net/r5uWX/

你的CSS应该是

dl {
  display: none;
 }

并在您的代码中提及 css 路径依赖。即使它不工作添加!important喜欢

dl {
  display: none !important;
 }

score 0 · Accepted Answer

例如，如果这个 dl 是 div 元素的子元素，你可以使用它

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

ps：如果你想删除第一个 dt 和 dd 你必须使用这个代码：

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

html - 如何隐藏一个带有 CSS 的项目？