雪碧图 选择器优先级

想用雪碧图做星星评价效果

css

.star-grade .sameing 
{
    display: inline-block;
    width: 55px;
    height: 11px;
    background: url(../img/star.png) no-repeat left top/100%;

}


 .star50
 {
     background-position: 0 0;
 }
 .star45
 {
     background-position: 0 -11px;/*图片往上移动就是负数*/
 }
 .star40
 {
     background-position: 0 -22px;
 }

 .star35
 {
     background-position: 0 -33px;
 }

 .star30
 {
     background-position: 0 -44px;
 }

以下是html代码,省略部分，设置的星星评分是不同块的

 <!--星星评分-->

          <div class="star-grade" >
                     <span class="sameing star40">
                       </span>
          </div>
     <!--星星评分-->
           <div class="star-grade" >
                     <span class="sameing star45">
                     </span>
           </div>

星星点亮数应该是不同的，因为我设置的每一块的所采用的雪碧图的位置也不同，出来的效果确是一模一样

通过浏览器看元素的css属性，发现 设置雪碧图取图的css属性被划线了（属性不能显现）

当我在css代码中省去了 .star-grade后 就呈现出想要的效果了

 .sameing    //这里省去了 star-grade
{
    display: inline-block;
    width: 55px;
    height: 11px;
    background: url(../img/star.png) no-repeat left top/100%;

}


 .star50
 {
     background-position: 0 0;
 }
 .star45
 {
     background-position: 0 -11px;/*图片往上移动就是负数*/
 }
 .star40
 {
     background-position: 0 -22px;
 }

又或者在 star50 star45 star40前加上star-grade 也能显现

.star-grade .sameing 
{
    display: inline-block;
    width: 55px;
    height: 11px;
    background: url(../img/star.png) no-repeat left top/100%;

}


.star-grade  .star50
 {
     background-position: 0 0;
 }
.star-grade .star45
 {
     background-position: 0 -11px;/*图片往上移动就是负数*/
 }
.star-grade .star40
 {
     background-position: 0 -22px;
 }

不太懂问什么有这样的冲突 是因为对同一雪碧图设置css属性 只有优先级相等才不会造成冲突