单独使用CSS时不显示类名称

我想在独立时将css类的显示选项设置为none，但当它与另一个类一起使用时，它也隐藏该元素。单独使用CSS时不显示类名称

所以这里是HTML的样子时，我想说明的传记类：

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

，在这里我想传记类设置为display:none当它是单独（不与用户类）：

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

，但如果我这样做：

.biography{ 
    display: none; 
}

它隐藏的传记类在这两种情况下。如何隐藏它，而不是用户类？

来源

2016-12-28 user7350862

您可以使用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>

来源

2016-12-28 17:20:36

真棒:)这是跨浏览器兼容吗？ – user7350862

当然，您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors结尾处看到浏览器兼容性表 –

您需要使用:not pseudoselector：

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

来源

2016-12-28 17:19:15

精确值的所有元素您可以使用属性选择器看，如果类名称完全

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

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

来源

2016-12-28 17:20:50 chazsolo

一个解决办法是添加第二个类，并且只适用显示：无当两个类都存在：

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

来源

2016-12-28 17:22:37

.biography { 
    display: none; 
} 

.biography.user { 
    display: block; 
}

来源

2016-12-28 17:23:11 grinmax

-1

我认为你应该使用默认为disply: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>

来源

2016-12-28 17:31:28 vinagreti

单独使用CSS时不显示类名称

回答

相关问题