css - 如何从包括其祖先在内的元素中获取最后一个 child ？

Question

我有这样的结构:

  <div class="dialogs-container">
    <div class="dialog-1">
      <div class="dialog__locker"></div>
      <div class="dialog__pane dialog__pane_pink">
        <button>Close dialog</button>
        <button>Open top dialog</button>
      </div>
    </div>
    <div class="dialog-2">
      <div class="dialog__locker"></div>
      <div class="dialog__pane dialog__pane_lightblue dialog__pane_small">
        <button>Close dialog</button>
      </div>
    </div>
  </div>

如何为 dialog__locker 类的最后一个元素指定样式？在我看来，我不能使用 :last-child 伪类，因为它只适用于一个指定的容器。我需要类似 :last-child 的东西，包括后代。

在这种情况下，我只想为 dialog-2 > dialog__locker 指定背景色和不透明度？

对话数不是常量。所以我不能在选择器中使用 dialog-2。

Answer 1

你可以这样做:

.dialogs-container> :last-child .dialog__locker {
  background: red;
  height: 5px;
}

<div class="dialogs-container">
  <div class="dialog-1">
    <div class="dialog__locker"></div>
    <div class="dialog__pane dialog__pane_pink">
      <button>Close dialog</button>
      <button>Open top dialog</button>
    </div>
  </div>
  <div class="dialog-2">
    <div class="dialog__locker"></div>
    <div class="dialog__pane dialog__pane_lightblue dialog__pane_small">
      <button>Close dialog</button>
    </div>
  </div>
</div>