: not псевдокласс, не работающий более чем с одним элементом
У меня есть список элементов, и я хочу применить некоторые изменения ко всем элементам, кроме 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;
}
Как я могу поместить в свой код два или более разных номера братьев и сестер с псевдоклассом :нет?
Ответы 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-е
Ваш код не работает, потому что первая строка относится ко всем тегам, кроме номера 9 (включая номер 11), а вторая относится ко всем тегам, кроме номера 11 (включая номер 9), поэтому вместе две строки относятся ко всем тегам. Вы можете добавить класс к ли номер 9 и номер 11 Тогда ваш код стал .myList li: not (.class)