如何使用id或class來分隔css屬性？

Question

我想做什麼：

div#test { color: green;} 
 
div { color: blue; background-color:white;}

<div id="test"> 
 
    <span>Text</span> 
 
</div> 
 

 
<div> 
 
    <span>Text2</span> 
 
</div>

我想只適用color:green（不background-color）具有id="test"div標籤。但正如您在這裏看到的，div標記與id="test"也有background-color ...

我該如何避免這種情況？

Answer 1

您需要背景無屬性添加到ID

div#test { color: green; background-color:none;} 
 
div { color: blue; background-color:white;}

<div id="test"> 
 
    <span>Text</span> 
 
</div> 
 

 
<div> 
 
    <span>Text2</span> 
 
</div>

Answer 2

您必須覆蓋在ID背景顏色（Charantej應答）或添加一個：沒有到div規則。 我將背景改爲紅色以使其可見。

div#test { color: green;} 
 
div:not(#test) { color: blue; background-color:red;}

<div id="test"> 
 
    <span>Text</span> 
 
</div> 
 

 
<div> 
 
    <span>Text2</span> 
 
</div>

Answer 3

您可以使用ID這樣

​​

Answer 4

你應該分開你想申請到一個類的風格。 則該類添加要應用背景樣式，像這樣的元素：

div#test { color: green;} 
 
div { color: blue;} 
 
.bg-white { background-color: white;}

<div id="test"> 
 
    <span>Text</span> 
 
</div> 
 

 
<div class="bg-white"> 
 
    <span>Text2</span> 
 
</div>