where interesting happend !

CSS3伪类选择器:last-child的理解和使用

最近弄东西时遇到一个css3选择器的小小的问题,就是伪类选择器的问题。
起源是这样的,我要实现如下的一个效果:

image

写起来没一点问题,但是再最后一个 border-bottom 时遇到小问题了。写出来的效果是这样的:

image

本以为很简单,使用css伪类 :last-child border-bottom 弄没就行了,但是我还是想简单了。

我的页面是这样写的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
<div class="item">
<span>昵称</span>
<span>赵大宝</span>
</div>
<div class="item">
<span>性别</span>
<span>男</span>
</div>
<div class="item">
<span>手机号</span>
<span>18888888888</span>
</div>
<div class="btn">完成</div>
</div>

css是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
.item{
display: flex;
justify-content: space-between;
align-items: center;
height: .4rem;
background-color: #fff;
border-bottom: .01rem solid #DDDDDD;
color: #333;
margin-bottom: .1rem;
}
.item:last-child{
border-bottom: none;
}

但是结果还是不变,最后一个 border-bottom 仍然是存在的。

经过调试发现问题了。 item:last-child 选择器并没有找到是最后一项, 在w3school上看到它的事例是这样的:

image

指定属于其父元素的最后一个子元素的 p 元素的背景色:

基本意思是,要求这个元素即是p元素,也是父级的最后一个元素。

这下基本明白原因了。我们这里的最后一个 .item,它是 .item,但是不是父级的最后一个元素。所以不能生效。

解决办法可以这样,在 .item 们外面包裹过一个 div 即可。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
<!--添加一个div包着-->
<div>
<div class="item">
<span>昵称</span>
<span>赵大宝</span>
</div>
<div class="item">
<span>性别</span>
<span>男</span>
</div>
<div class="item">
<span>手机号</span>
<span>18888888888</span>
</div>
</div>
<div class="btn">完成</div>
</div>

那么如果我不想改变dom结构呢,有没有其他办法,比如使用其他的伪类选择器。

答案是可以的.我们的dom结构不改,改下选择器。不使用 :last-child,使用 :nth-last-child,翻阅查找w3school看到它的解释是这样的:

规定属于其父元素的第二个子元素的每个 p 元素,从最后一个子元素开始计数:

所以我们这么就可以了:

1
2
3
4
5
6
7
8
9
10
11
12
13
.item{
display: flex;
justify-content: space-between;
align-items: center;
height: .4rem;
background-color: #fff;
border-bottom: .01rem solid #DDDDDD;
color: #333;
margin-bottom: .1rem;
}
.item:nth-last-child(2){
border-bottom: none;
}

css3的选择器有好多,像 :nth-of-type(n)nth-of-type(n)nth-child(n) 都是挺值得研究使用的。有机会再好好研究。

Comments

Proudly published with Hexo