Сбросить изменения псевдокласса в css
В приведенном ниже фрагменте я сделал первый элемент списка красным и скрыл все остальные элементы списка.
Затем я пытаюсь отобразить все элементы списка и сделать их все черными, ориентируясь на элементы li.
В настоящее время никаких изменений с использованием последнего селектора li не производится.
Итак, Мне интересно, почему последний селектор li не влияет на визуальный вывод?
Спасибо
li:not(:first-child) { /* Hide all li elements other than the first one */
display: none;
}
li:first-child { /* Set list item 1 to be red */
color: red;
}
/* Undo all changes above */
li { /* Make all li elements have this property ()*/
display: block;
color: black;
}<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ответы 2
От https://developer.mozilla.org/en-US/docs/Web/CSS/:not
This pseudo-class can increase the specificity of a rule. For example,
#foo:not(#bar)will match the same element as the simpler#foo, but has a higher specificity.
Ваше первое правило имеет более конкретную специфику, чем последнее правило, поэтому display: none; остается в силе, а display: block; игнорируется.
Увеличьте специфичность последнего селектора, чтобы получить нужный результат.
Вот пример, в котором все селекторы имеют одинаковую специфичность (класс + псевдокласс), и последний из них победит:
li:not(:first-child) { /* Hide all li elements other than the first one */
display: none;
}
li:first-child { /* Set list item 1 to be red */
color: red;
}
/* Undo all changes above */
li:nth-child(n) { /* Make all li elements have this property ()*/
display: block;
color: black;
}<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Спасибо, в этом есть смысл. Вы знаете, почему мне нужно выбирать всех n детей? Разве выбор li уже не делает этого?
@Nick Parsons: Как уже говорилось,: nth-child () обеспечивает специфичность псевдокласса, необходимую для соответствия первым двум правилам. Вы можете заменить его любым другим псевдоклассом, который гарантирует совпадение, например: not (: root).
@NickParsons да li достаточно, и nth-child не добавит ограничений к селектору, он просто повысит специфику. Это не влияет на выбор, а влияет только на конкретность.
@NickParsons прочтите ссылку, которой я поделился, и вы получите дополнительную информацию;)
Я ожидаю, что все 3 элемента в списке будут черными, а не только первый красный.