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>

Answer 2

您也可以执行以下操作：

.dialogs-container [class|="dialog"]:last-child {
  background: red;
  height: 5px;
}

我假设您将始终将嵌套在dialog-<some-number>中的div dialogs-container命名

如何从包括祖先在内的元素中获取最后一个孩子？

2 个答案: