javascript - 填充权不适用于最后一个 child

Question

尝试做一个图片时间轴界面，有点卡壳了。标记始终位于中心，因此第一个元素的 padding-left: 50% 工作正常。但是，我还希望最后一个元素具有 padding-right: 50%，这样我就可以一直滚动到最后一个元素的末尾。

这是 jsfiddle:https://jsfiddle.net/da3hk2xz/

如您所见，#timeline:last-child 未被应用。

var timeline = document.getElementById("timeline");

for (var i = 0; i < 25; i++) {
  var img = document.createElement("img");
  img.src = "http://placehold.it/300x150?text=" + i
  timeline.append(img)
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#timeline {
  width: 100%;
  height: 150px;
  background-color: red;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
}

#timeline:nth-child(1) {
  padding-left: 50%;
}

#timeline:last-child {
  padding-right: 50%;
}

#marker {
  /* http://apps.eky.hk/css-triangle-generator/ */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 17.5px 0 17.5px;
  border-color: #007bff transparent transparent transparent;
  position: absolute;
  bottom: 115px;
  /* 150 - 35 */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#line {
  width: 2px;
  height: 115px;
  /* 150 - 35 */
  background-color: purple;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

<div id="timeline"></div>
<div id="marker-container">
  <div id="marker"></div>
  <div id="line"></div>
</div>

Answer 1

只需将有问题的选择器从您所拥有的更改为下面的选择器即可:

#timeline :nth-child(1) {
  padding-left: 50%;
}

#timeline :last-child {
  padding-right: 50%;
}

原因是选择器中的最后一个“短语”是将应用样式的元素。在您的 fiddle 中，最后一个“短语”是 #timeline 元素本身，因此它正在接收填充。在 #timeline 和 :last-child 之间放置一个空格使 :last-child 短语成为最后一个，并且由于选择器中的空格表示“任何后代”，后代将收到填充。

---

用简单的英语:

#timeline:last-child:父元素的最后一个子元素，也的 ID 为 timeline。 #timeline :last-child:ID 为 timeline 的元素的子元素的最后一个元素。

以直系后代为目标也是一种更安全、更有效的解决方案:

#timeline > :nth-child(1)
#timeline > :last-child

CSS 很有趣。