如何使用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）应用于div的{​​{1}}代码。但正如您在此处所见，id="test"标记div也有id="test" ...

我该如何避免这种情况？

Answer 1

您必须覆盖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 2

您需要将背景无属性添加到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 3

你可以像这样使用id

#test {
  color: green;
  background: red;
}

div {
  color: blue;
  background: none;
}

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

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

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>