css3的伪类大多数初级前端开发者都用的很多了,最常用的形如 :hover,:active等,选择器类型的如 :nth-child(),:first-child,:last-child等。

最近在改一个样式的时候发现一个问题,dom结构是这样的:

<div class="col-md-9 left-frame">
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<article class="post"></article>
	<div class="pagenation text-center">
</div>

这个结构很清晰,left-frame中包含了文档的list,最下面是分页(pagenation),于是有了下面的样式:

.left-frame .post{border-bottom:1px solid #ccc}
.left-frame .post:last-child{border:none}

目的是让每个article底部虚线,最后一条记录下不用虚线。反复刷新页面发现,最后一个article依然存在,难道 :last-child不是通过选择器选择指定的最后一条记录吗?百思不得其解,于是又去w3上查了一遍

实例

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

p:last-child{ 
background:#ff0000;
}

定义和用法

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

提示:p:last-child 等同于 p:nth-last-child(1)。


写的很简单,但是大概明白问题出在哪里了,:last-child貌似只认识同级的最后一个匹配元素,由于父元素 .left-frame的子元素最后一个元素并不是article,而是 pagenation ,下面的这一样是找不到的

.left-frame .post:last-child{border:none}

因此出现了没有任何效果的情况,同样的:first-child也是类似情况。知道了原理,就很好处理了,我把结构改一下:

<div class="col-md-9 left-frame">
        <div class="post-list">
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
        	<article class="post"></article>
	</div>
	<div class="pagenation text-center">
</div>
.post-list .post{border-bottom:1px solid #ccc}
.post-list .post:last-child{border:none}

这样就没问题了,一直以为通过

.left-frame .post:last-child

能定位到指定class的最后一条记录,后面要明确下了。