: не псевдокласс не работает с более чем одним элементом

Question

У меня есть список элементов, и я хочу применить некоторые изменения ко всем элементам, кроме 9 и 11, поэтому я пишу что-то вроде:

.myList li:not(:nth-child(9)),
.myList li:not(:nth-child(11)) {
  background-color: greenyellow;
}

<ol class="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
  <li>Fourteen</li>
</ol>

Этот код применяет изменения ко всем <li> без исключений, но работает, если я поставлю только один!как это: (этот способ применяет изменения ко всем, кроме 9)

   .myList li:not(:nth-child(9)) {
      background-color: greenyellow;
   }

Как я могу поставить два или более разных числа братьев и сестер с : не псевдокласс в моем коде?

Answer 1

Ваш код не работает, потому что первая строка относится ко всем тегам, кроме номера 9 (включая номер 11), а вторая относится ко всем тегам, кроме номера 11 (включая номер 9), поэтому вместе 2 строки относятся ко всемтеги.Вы можете добавить класс к li номер 9 и номер 11. Тогда ваш код стал .myList li: not (.class)

Answer 2

Причина, по которой .myList li:not(:nth-child(9)), .myList li:not(:nth-child(11)) применяется ко всем элементам, заключается в том, что 9 и 11 находятся как минимум в одном условии.
9-й не 11-й дочерний элемент, поэтому применяется css и наоборот

В вашем случае вы просто хотите сделать

.myList li:not(:nth-child(9)):not(:nth-child(11)) {
    background-color: greenyellow;
}

, чтобы он выбирал все, что не является 9-м или 11-м