看看是不是你想要的:
<style type="text/css">.warp .a{
background-color: #ccc
height: 30px
}
.warp .a:last-child{ /*最后一个 class为a 的元素*/
background-color: #000
}
</style>
<div class="warp">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
</div>
以你在样式表中的定义的顺序来进行叠加覆盖的。假设你的定义顺序是:
.class1{...}
.class2{...}
.class3{...}
假设这三个类名同时写在一个元素上面<div class="class1 class2 class3"></div>
那么应用样式时,这三个类定义的样式如果有相同的属性定义,那么以class3定义的为准,不同的属性会进行合并。需要注意的是,如果定义样式时,class1或者class2中用了 !important。那么加了!important的类名具有更高的优先级。(并且IE6及更早浏览器下,!important在同一条样式内不生效。)