單獨使用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時不顯示類名稱

回答

相關問題