css伪类一个简单而又容易忽略的问题

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的最后一条记录，后面要明确下了。