<div class="container">
<div class="menu">
<span>导航</span>
<span>音乐</span>
<span>新闻</span>
<span class="choose">星座</span>
</div>
<div class="card">
<div class="constellation">
<div class="item num0 isHover">
<div class="image"></div>
<div class="description">
<p></p>
<p></p>
<div class="mark"></div>
</div>
</div>
<div class="item num1 selected">
<div class="image"></div>
<div class="description">
<p></p>
<p></p>
<div class="mark"></div>
</div>
</div>
<div class="item num2">
<div class="image"></div>
<div class="description">
<p></p>
<p></p>
<div class="mark"></div>
</div>
</div>
</div>
</div>
</div>
一开始的css是这样的写的,
.container .card .constellation .item .image {
float: left;
width: 52px;
height: 52px;
background: url("xingzuo/xingzuo.png") no-repeat;
}
.num0 .image {
background-position: 0 0;
}
.num1 .image {
background-position: 0 -52px;
}
.num2 .image {
background-position: 0 -104px;
}
结果浏览器显示的背景图片一直是同一张。一直想不明白是为什么。
后来cai发现是css权重问题:
修改css代码:
.container .card .constellation .num0 .image {
background-position: 0 0;
}
.container .card .constellation .num1 .image {
background-position: 0 -52px;
}
.container .card .constellation .num2 .image {
background-position: 0 -104px;
}