有没有办法：不（某事或某事）

Question

一个例子不言而喻

.cyan {
  background-color: cyan;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}

li:not(.yellow), li:not(.green) {
  color: white;
}

<ul>
  <li class="cyan">red</li>
  <li class="red">red</li>
  <li class="green">green</li>
  <li class="blue">blue</li>
  <li class="yellow">yellow</li>
</ul>

我希望青色和黄色保持黑色。我知道有很多方法，但这不是我想要的。

我想这样做：不是（.yellow或.green）

Answer 1

您可以将:not否定选择器链接在一起：

.cyan {
  background-color: cyan;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}

li:not(.yellow):not(.green) {
  color: white;
}

<ul>
  <li class="cyan">red</li>
  <li class="red">red</li>
  <li class="green">green</li>
  <li class="blue">blue</li>
  <li class="yellow">yellow</li>
</ul>

Answer 2

这样你可以做到

li:not(.yellow):not(.green) {
  color: white;
}

Answer 3

.cyan {
  background-color: cyan;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}

li:not(.yellow):not(.green) {
color: white;
}

<ul>
  <li class="cyan">red</li>
  <li class="red">red</li>
  <li class="green">green</li>
  <li class="blue">blue</li>
  <li class="yellow">yellow</li>
</ul>