css权重问题

<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;
}