Question

我想在css类单独使用时将display选项设置为none，但是当它与另一个类一起使用时它也会隐藏该元素。

所以这就是当我想要展示传记课时html的样子：

<div class="user biography">
  <p>Content</p>
</div>

在这里我希望传记类在单独使用时设置为display:none（不是用户类）：

<div class="biography">
  <p>should hide</p>
</div>

但如果我这样做：

.biography{
  display: none;
}

它隐藏了两种情况下的传记课程。如果单独而不是用户类，我该如何隐藏它？

Answer 1

您可以使用attribute selector [class='biography']，这将匹配具有精确值biography

的类的所有元素

[class='biography'] {
  display: none;
}

<div class="user biography">
  <p>Content</p>
</div>
<div class="biography">
  <p>should hide</p>
</div>

Answer 2

您可以使用属性选择器查看该类是否与该名称完全匹配

[class="biography"] {
  display: none;
}

仅匹配class="biography"的元素。

Answer 3

您需要使用.biography:not(.user){ display: none; }伪选择器：

show.bs.popover

Answer 4

一种解决方案是添加第二个类，并且只在两个类都存在时才应用display：none：

<div class="user biography">
  <p>Content</p>
</div>
<div class="biography hidden">
  <p>should hide</p>
</div>
<style>
.biography.hidden {
  display: none;
}
</style>

Answer 5

.biography {
    display: none;
}

.biography.user {
    display: block; 
}

Answer 6

我认为默认情况下应使用disply:none，当元素位于内部或使用类时，应使用display:block。所以，你可以这样做：

＆＃13;

.user.biography {
  display: block;
}

.biography {
  display: none;
}

＆＃13;

<div class="user biography">
  <p>Content</p>
</div>



<div class="biography">
  <p>should hide</p>
</div>

＆＃13;

单独时CSS不显示类名

6 个答案: