Html 每个div后面的分隔符，最后一个除外

在每篇文章之间，我有一个水平分隔符：

.article{
边缘底部：20px；
垫底：20px；
边框底部：1px实心#eee；
}

你好
你好
你好
你好

使用此CSS：

.article:last-child { border-bottom: none; }

---

演示：

使用

：最后一个子项

伪选择器：

.article:last-child { border-bottom: none; }

基本上，这个选择器所做的是询问“我是我父元素的最后一个直接子元素吗？”，如果是，则应用规则

注意：

:last child

，以及

:first child

，经常被CSS初学者误解。它不表示“查找我的最后一个子元素”

.article{页边距底部：20px；填充底部：20px；边框底部：1px实心#EEE；}
.文章：最后一个孩子{
边框底部：0无；
}

你好
你好
你好
你好

类似这样的东西

.article:不是（：最后一个孩子）{
边缘底部：20px；
垫底：20px；
边框底部：1px实心#EEE；
}

你好
你好
你好
你好

我更喜欢使用

:first child

而不是

:last child

，因为IE7+支持它（）：

.article{
填充：20px0；
边框顶部：1px实心#eee；
}
.文章：第一个孩子{
填充顶部：0；
边界顶部：0；
}

你好
你好
你好
你好

这个问题还有一些其他解决方案值得一提

：第一个孩子

您可以使用

：first child

并在教学元素顶部设置边框-first child然后删除第一个元素上的边框，视觉输出相同

由于css2规范中有

:first child

，您可以指望比

:last child

更广泛的浏览器支持。这无疑是一个边缘案例，但可以想象，它可能会受到冲击，特别是考虑到所讨论的浏览器是IEs

它也比上一个孩子在浏览器中。浏览器不必做任何事情来查看所有元素并计算出最后一个元素，它可以在匹配的第一个元素处停止。如果前端比较复杂，那么值得考虑

相邻选择器

相邻选择器规则仅允许在元素具有指定类型的另一个元素作为同级元素时将其作为目标。因此：

p + p { border-top: 1px solid #888; }

仅当前面有

p

标记时，才会在

p

标记上设置边框顶部

这将再次涵盖边缘情况下的浏览器：last child可能不会，尽管我认为这是一个性能问题，遇到了与：last child类似的问题

一门课

---

您也可以只在最后一个元素上使用一个类。虽然这个问题在视觉上没有必要这样做，但是如果您想对最后一个元素执行更复杂的操作，或者包含的HTML可能会由于某种原因而更改，那么值得考虑。

使用

。文章：最后一个孩子{border bottom:none；}

---

每个元素都将具有定义的样式（/边框）

：not

在IE<9中不受支持。值得注意的是，对

：last child

的支持要比对

：not

的支持要好得多，所以如果IE<9是相关的（IE 8仍然很常见），

：last child

是一个不错的选择。不过，我喜欢你的第一个解决方案，那就是不需要重置无用的属性设置。@connexo ty，我不知道IE不支持

：not

，<9I喜欢你显示备选方案的方法；但是，必须注意的是，

p+p

并不像你所说的那样，针对的是“p后面跟着另一个p”，而是“p后面跟着一个p”。更清楚地说，

div+p

针对的是

p

，而不是

div

（如您所说）。

p + p { border-top: 1px solid #888; }