2017-01-25 21 views
3

Это со ссылкой на эту codepen здесь https://codepen.io/jamesbarnett/pen/vlpkh?editors=1100CSS: не селектор запутанного поведение

Я искал какую-то чистую систему CSS Star Rating. Я действительно смутился с заявлением .rating:not(:checked) > label:hover

Может кто-нибудь объяснить мне, как это возможно? A .rating - элемент набора полей. Как мы можем применить к нему селектор :not(:checked). Это никогда не будет проверено. Если бы это было .rating input:not(:checked), это имело бы смысл для меня.

Похоже, что он каким-то образом выбирает входные данные внутри него. Причина Я не могу найти документацию, поддерживающую это поведение CSS :not селектор.

Я не могу понять, как это работает на удивление.

+0

Пожалуйста, добавьте здесь свой HTML и CSS. Не заставляйте читателей следить за ссылкой, чтобы увидеть ваш код. – BoltClock

+0

@BoltClock Это хорошая практика, чтобы упомянуть codepen, чтобы любой, кто хочет ответить на него, может сделать это легко. В большинстве случаев люди на форуме просят кодировки или скрипки. –

+0

Никто не может ответить на ваш вопрос, не нажимая на ссылку. Это неприемлемо. Вы можете включить ручку, но код должен быть в вопросе * независимо * от того, включаете ли вы его. – BoltClock

ответ

2

Поскольку элемент с классом «рейтинг» не является проверяемым входным элементом, псевдокласс класса никогда не будет соответствовать.

Наоборот, not(:checked) будет всегда матч (demo) - что делает его функционально излишним (для дополнительной специфичности, кроме) и поэтому может быть безопасно опустить

Обратите внимание, что вы можете удалить псевдо класс с селектором и демо все еще работает одинаково (updated codepen).