html - 单独时，CSS 不显示类名

Question

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

所以这是当我想显示传记类时 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>