Почему это: проверенный селектор не работает?

В приведенном ниже примере, почему выбранная звезда и все звезды перед ней не остаются желтыми?Почему это: проверенный селектор не работает?

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 

 
.rating { 
 
    display: inline; 
 
    border: none; 
 
} 
 

 
.rating > label > input { 
 
    margin: 0px; 
 
} 
 

 
.rating > label:before { 
 
    margin: 0px; 
 
    font-size: 1em; 
 
    font-family: FontAwesome; 
 
    display: inline-block; 
 
    content: "\f005"; 
 
} 
 

 
.rating > label { 
 
    color: #ddd; 
 
} 
 

 
.rating > input:checked ~ label, /* show gold star when clicked */ 
 
.rating:hover label { color: #FFD700; } /* hover previous stars in list */ 
 
.rating:not(:checked) > label:hover { color: #FFD700; } /* hover current star */ 
 
.rating:not(:checked) > label:hover ~ label { color: #ddd; } /* un-hover stars after current star */

<form> 
 
    <fieldset class="rating"> 
 
    <label for="radio1"><input id="radio1" type="radio" value="1"></label> 
 
    <label for="radio2"><input id="radio2" type="radio" value="2"></label> 
 
    <label for="radio3"><input id="radio3" type="radio" value="3"></label> 
 
    <input type="submit" value="Submit"> 
 
    </fieldset> 
 
</form>

Строки кода, которые вызывают проблемы в моем коде:

/* css */ 

.rating > input:checked ~ label, /* show gold star when clicked */ 
.rating:hover label { color: #FFD700; } /* hover previous stars in list */

Я не могу понять, почему селекторы не работают должным образом.

Пожалуйста, помогите!

источник

2016-07-03 Jarrod

проверки этой теме: http://stackoverflow.com/questions/2324446/how-to-build-a-basic-and-simple -5-star-rating-system # 2324543 – moped

В коде есть много-много проблем, больше, чем просто использование: checked, недостаточно, чтобы иметь возможность вписаться в один комментарий. На этом этапе вам лучше служить, ссылаясь на существующую реализацию. – BoltClock

@BoltClock Это на самом деле то, что я пытаюсь сделать. Но мне также нужно заставить его работать с моим кодом Django. Я думаю, мне действительно нужно вернуться к тому, как я это делаю. – Jarrod

, потому что ваш флажок не ребенок .rating, ты завернул его в этикетку, чтобы ваш код должен быть вам нужно взять входные данные из метки:

<input id="radio1" type="radio" value="1"><label for="radio1"></label>

, а затем измените CSS для:

.rating > input:checked + label{}

источник

2016-07-03 05:19:39

Django помещает ввод внутри метки, я просто использую язык шаблона. И насколько я могу судить, это немного больно, чтобы не делать этого. – Jarrod

вы не можете выбрать родительский элемент в css, если вы не можете изменить структуру html, я боюсь, что вам нужно серьезно использовать js –

А работает JSFiddle https://jsfiddle.net/LeoAref/s3btcwjg/

Здесь мы можем использовать селектор CSS Смежный родственный +

.rating input:checked + label, 
.rating input:hover + label, 
.rating label:hover { color: #FFD700; }

и редактировать HTML, чтобы быть похожим:

<form> 
    <fieldset class="rating"> 
     <input id="radio1" type="radio" name="radio" value="1"><label for="radio1"></label> 
     <input id="radio2" type="radio" name="radio" value="2"><label for="radio2"></label> 
     <input id="radio3" type="radio" name="radio" value="3"><label for="radio3"></label> 
     <input type="submit" value="Submit"> 
    </fieldset> 
</form>

источник

2016-07-03 05:24:07

? ваш ответ - просто копия предыдущей. – moped

@moped Это НЕ копия, я потратил больше времени, чтобы сделать рабочую скрипку, а не просто добавил код! –

Почему это: проверенный селектор не работает?

ответ

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