4

http://fortawesome.github.io/Font-Awesome/examples/の fontawesome 星評価で最初の 2 つの星の色を変更しようとしています。

クラスを 1 番目と 2 番目のスパンに割り当てましたが、機能しません

私のhtmlは

<span class="rating">
<span class="star filled"></span>
<span class="star filled"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</span>

そして私のCSSは

.rating {
       unicode-bidi:bidi-override;
       direction:rtl;
       font-size:30px;
}
.rating span.star {
      font-family:FontAwesome;
      font-weight:normal;
      font-style:normal;
      display:inline-block;
}
.rating span.star:hover {
     cursor:pointer;
}
.rating span.star:before {
     content:"\f006";
     padding-right:5px;
     color:#999999;
}
.rating span.star:hover:before, .rating span.star:hover~span.star:before {
     content:"\f005";
     color:#e3cf7a;
}


.filled{ color:#e3cf7a; }

JSFIDDLE http://jsfiddle.net/code_snips/ttyYD/

4

3 に答える 3

0 


.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }




   <span class="rating" style="font-size:13px;"><span class="star"></span><span class="star"></span><span class="star filled"></span><spanclass="star filled"></span><span class="star filled"></span></span>
于 2014-03-09T16:26:03.570 に答える