想用雪碧图做星星评价效果
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属性 只有优先级相等才不会造成冲突