CSS: не псевдокласс не работает

Я изучаю псевдокласс класса :not() и он не работает должным образом.CSS: не псевдокласс не работает

Я хочу окрасить весь текст красным, за исключением .mind. По какой-то причине это не мешает элементу .mind быть красным.

:not(.mind) { 
 
    color: red 
 
}

<div class='parent'> 
 
    <div class='child'>One</div> 
 
    <div class='child'>Two</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'>One</div> 
 
    <div class='child'>Two</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'>One</div> 
 
    <div class='mind'>mind</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'> 
 
    <p>First paragraph</p> 
 
    </div> 
 
</div>

источник

2017-01-12 Robert Rocha

Имейте это в виду:

:not() эквивалентно *:not()

Когда нет выбора префикса :not() псевдо-класса, универсальный селектор подразумевается:

6.2. Universal selector

Если универсальный селектор представлены * (т.е. без префикса ) не является единственным компонентом последовательности простых селекторов или сразу же следует псевдоэлемент, тогда * может быть опущен и подразумевается присутствие универсального селектора.

Таким образом, у вас есть правило:

:not(.mind) { 
    color: red 
}

... говорит применять красный цвет для всех элементов, кроме элемента с классом mind.

Хорошо, за исключением того, в этом случае, the color property is inheritable, так что даже если красный не будет применен к .mind элементу, он по-прежнему получает красный через наследование от .parent элемента.

Вот что делает браузер:

Быстрый способ проверить это поведение является с border свойством, которое не является наследуемым.

В приведенном ниже примере, с помощью переключателя, вы заметите, что граница не будет применена к .mind, и ваш селектор работает, как вы ожидали:

:not(.mind) { 
 
    color: red; 
 
    border-bottom: 1px dashed black; 
 
}

<div class='parent'> 
 
    <div class='child'>One</div> 
 
    <div class='child'>Two</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'>One</div> 
 
    <div class='child'>Two</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'>One</div> 
 
    <div class='mind'>mind</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'> 
 
    <p>First paragraph</p> 
 
    </div> 
 
</div>

источник

2017-01-12 04:01:02

[Другой комментарий repost] (http://stackoverflow.com/posts/comments/66825737): «По моему опыту, большинство авторов считают удивительным, что псевдоклас или псевдоэлемент могут появляться сами по себе, без сопровождения [ sic], идентификатор или селектор. И когда вы скажете им, что псевдо-класс или псевдо-эльт могут появляться сами по себе во многом таким же образом, как может быть селектор id или класса, они действуют так, как будто у них просто было прозрение. потому что вы редко находите одиночные псевдоклассы или псевдоэлементы в создании CSS (кроме: root и :: selection, я думаю). " – BoltClock

Вы можете сообщить опечатки в www-style, но так как css3-selectors уже является REC, а селекторы-4 активно работают, я бы не стал беспокоиться. Есть ряд других, таких как «события» в разделе специфичности. – BoltClock

Ничего себе. Я предполагаю, что мое первоначальное предположение было правильным –

ваш селектор работает отлично, потому что :not(.mind) такой же, как *:not(.mind) - который является универсальным селектором - но потому что .mind является ребенком .parent он получит color:red унаследовал от .parent, и поэтому вы видите, что он окрашен в красный цвет.

Чтобы упростить, в этом случае нет необходимости использовать :not() просто использовать .child

.child { 
 
    color: red 
 
}

<div class='parent'> 
 
    <div class='child'>One</div> 
 
    <div class='child'>Two</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'>One</div> 
 
    <div class='child'>Two</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'>One</div> 
 
    <div class='mind'>mind</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'> 
 
    <p>First paragraph</p> 
 
    </div> 
 
</div>

Однако, если вы хотите .mind ДИВ иметь также .child класс, в этом случае, вы можете используйте :not() следующим образом:

.child:not(.mind) {rules}

Отрывок

.child:not(.mind) { 
 
    color: red 
 
}

<div class='parent'> 
 
    <div class='child'>One</div> 
 
    <div class='child'>Two</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'>One</div> 
 
    <div class='child'>Two</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'>One</div> 
 
    <div class='child mind'>mind</div> 
 
    <div class='child'>Three</div> 
 
    <div class='child'> 
 
    <p>First paragraph</p> 
 
    </div> 
 
</div>

источник

2017-01-12 02:57:17 dippas

Спасибо вы. В настоящее время я изучаю псевдо-класс ': not()' и хотел бы знать, почему мой код не работал. –

'div: not (.mind)' в качестве примера селектора будет иметь здесь гораздо больше смысла. –

Спасибо. Я смотрел синтаксис на MDN, и он не требует модификатора типа '.child' в начале' not() '. Он указывает, что синтаксис будет ': not ( #) {style properties}'. Я думаю, это меня смутило. https://developer.mozilla.org/en-US/docs/Web/CSS/:not –

Это нацеливание родительский селектор, и ребенок (.mind) наследует его. Код работает просто отлично, если .mind не наследует цвет от родителя.

div:not(.mind) { 
 
    color: red; 
 
}

\t \t <div class='child'>One</div> 
 
\t \t <div class='child'>Two</div> 
 
\t \t <div class='child'>Three</div> 
 
\t \t <div class='child'>One</div> 
 
\t \t <div class='child'>Two</div> 
 
\t \t <div class='child'>Three</div> 
 
\t \t <div class='child'>One</div> 
 
\t \t <div class='mind'>mind</div> 
 
\t \t <div class='child'>Three</div> 
 
\t \t <div class='child'><p>First paragraph</p></div>

Вам нужно определить правила для .mind именно в этом случае.

источник

2017-01-12 03:02:18

Вы можете использовать :not Как следует:

.parent :not(.mind){ 
    color:red; 
}

Код:

.parent :not(.mind){ 
 
\t color:red; 
 
}

<div class='parent'> 
 
\t <div class='child'>One</div> 
 
\t <div class='child'>Two</div> 
 
\t <div class='child'>Three</div> 
 
\t <div class='child'>One</div> 
 
\t <div class='child'>Two</div> 
 
\t <div class='child'>Three</div> 
 
\t <div class='child'>One</div> 
 
\t \t \t 
 
\t <div class='mind'>mind</div> 
 
\t \t \t 
 
\t <div class='child'>Three</div> 
 
\t <div class='child'> 
 
\t \t <p>First paragraph</p> 
 
\t </div> 
 
</div>

источник

2017-01-12 03:27:52 Ehsan

CSS: не псевдокласс не работает

ответ

Смежные вопросы