当单独使用时，将CSS类名的显示设置为none。

Question

我希望将CSS类的显示选项设置为none，当它单独使用时，但是当它与另一个类一起使用时，它也会隐藏该元素。

所以，这是我想显示传记类的HTML外观:

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

当且仅当biography类单独存在时（而不是与user类一起），我希望将其设置为display:none：

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

但是如果我这样做：

.biography{
  display: none;
}

在这两种情况下，它都隐藏了biography类。当它单独存在且不带有user类时，如何隐藏它？

- user7350862

Answer 1

您可以使用属性选择器 [class='biography']，这将匹配所有具有确切值为 biography 的类的元素。

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

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

- Nenad Vracar

---

这很棒 :) 它是否跨浏览器兼容？ - user7350862

当然，您可以在 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors 的末尾查看浏览器兼容性表。 - Nenad Vracar

Answer 2

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

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

只有具有 class="biography" 的元素将被匹配。

- chazsolo

Answer 3

您需要使用:not伪类选择器：

.biography:not(.user){
  display: none;
}

- Max Koretskyi

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>

- Steven Waters

Answer 5

.biography {
    display: none;
}

.biography.user {
    display: block; 
}

- grinmax

Answer 6

我认为你应该默认使用display:none，当元素在内部或具有类时使用display:block。因此，你可以这样做：

.user.biography {
  display: block;
}

.biography {
  display: none;
}

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



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

- Bruno João