CSS使用:之后和:最后一个孩子一起

Question

我正在尝试将伪元素组合在一起： and ：last-child 一起。

我有一个收音机列表，标签为1-10。由于最后一个标签为10，并且位置是错误的。因此，我试图仅访问最后一个。

这个小提琴可能会清楚我的意思：

jsfiddle：https：//jsfiddle.net/l2n4m3w3/

如您所见，最后一个略微偏离中心

这是我试图获得最后一个元素的方式：

input[name='happy-score']:last-child + label:after {
    left: 0px;
}

但是，这没有任何效果。

我也尝试了：

input[name='happy-score']+ label:last-child:after {
    left: 0px;
}

但是，这似乎会影响所有元素，请参阅此小提琴：https：//jsfiddle.net/0aclrna0/

Answer 1

您应该将此CSS用于最后一个孩子的标签： li:last-child input[name='happy-score'] + label:after { left: 0px; }

Answer 2

使用此

检查一次

ul.horizontal-list li:last-child label::before {
    left: 0px;
}
ul.horizontal-list li:last-child label::after {
    left: -10px;
}