想选择第二个item将里面的active背景图更换,但是我从csdn学的格式带进去一直没有效果,求个人帮忙看看
<div class="item">
<div class="pic">
<a href="#">
<img src="uploads/item_2.png" alt="">
a>
<i class="iconfont icon-shoucang1">i>
<div class="active">
进行中
div>
div>
<div class="txt">2div>
div>
<div class="item">
<div class="pic">
<a href="#">
<img src="uploads/item_1.png" alt="">
a>
<i class="iconfont icon-shoucang1">i>
<div class="active">
已截止
div>
div>
<div class="txt">2div>
div>
下面是less文件夹中的
.main {
padding-bottom: (50 / @rootSize);
//banner区域
.banner {
height: (160 / @rootSize);
img {
width: 100%;
height: 100%;
}
}
//title区域
.title {
padding: 0 (15 / @rootSize);
height: (41 / @rootSize);
line-height: (41 / @rootSize);
h4 {
color: #3C3C3C;
font-size: (14 / @rootSize);
}
}
//item区域
.item {
margin-bottom: 10px;
.pic {
position: relative;
// 图片区域给高度,方便子绝父相
height: (160 / @rootSize);
//爱心字体图标
i {
position: absolute;
top: (15 / @rootSize);
right: (18 / @rootSize);
font-size: (24 / @rootSize);
color: #fff;
&:hover {
color: orange;
}
}
//active显示
.active {
position: absolute;
top: (-4 / @rootSize);
left: (15 / @rootSize);
width: (68 / @rootSize);
height: (29 / @rootSize);
// 背景图片的尺寸远大于指定的盒子宽度,所以需要给图片指定尺寸
background: url(./../images/status_active.png) no-repeat;
background-size: contain;
font-size: (12 / @rootSize);
color: #fff;
text-align: center;
line-height: (26 / @rootSize);
}
}
.txt {
//公共内边距的调用
.public_padding;
background-color: #fff;
}
}
&item:nth-child(2) .active {
background: url(../images/status_default.png) no-repeat;
}
}
&
就代表父级
&:nth-child(2) .active
不知道,给你顶顶帖子吧