最后一个孩子不工作的边界。为什么？

Question

不能理解这个问题 https://jsfiddle.net/ure6o695/1/

#wrapper > div {
float: left;
border-left: 1px solid;
border-color: #ff0303;
font-family: Aller_Rg;
padding:21px;

}

#wrapper > div:last-child {
border-right: 1px solid;
border-color: #ff0303;

}

#wrapper > img {
float: right;

}

div {
background: green;

}

Answer 1

您的上一个div也不是其父级的:last-child，因为您还有两个img元素：而不是:last-of-type

#wrapper > div:last-of-type {
    border-right: 1px solid;
    border-color: #ff0303;
}

福克：https://jsfiddle.net/vmb9zLrv/

---

如果您需要支持较旧的浏览器（其中:last-of-type伪类不可用，例如IE7或IE8），您可以撤消逻辑并将border-right应用于所有您的div和仅border-left的{​​{1}}。

传统方法：https://jsfiddle.net/7Lty07zq/1/

Answer 2

更改此CSS行：

#wrapper > div:last-child {

对此：

#wrapper > div:last-of-type {