First-child 和 last-child 在不同的容器中

Question

我可以将 first-child 和 last-child 伪元素应用于具有相同 class 而不同 sub-containers 的 div 吗？在下面的示例中，div 和 classes "box selected" 都存储在“1st-container”下，但途中还有 2 个额外的容器：

<div class="1st-container">
    <div class="2nd-container">
        <div class="3rd-container">
            <div class="box selected">  // this div should have first-child pseudo elements
            <div class="box">
        </div>
    </div>
    <div class="2nd-container">
        <div class="3rd-container">
            <div class="box selected">
            <div class="box">
            <div class="box">
            <div class="box">
        </div>
    </div>
    <div class="2nd-container">
        <div class="3rd-container">
            <div class="box selected">  // this div should have last-child pseudo 
            <div class="box">
        </div>
    </div>
</div>

纯 css 可行吗？

Answer 1

您无法执行您所描述的操作，因为在这两种情况下，"box selected" 都是其父项的第一个子项。不过，您可以采取不同的方法。例如，您可以像这样定位这两个 div：

.2nd-container:first-child .selected, 
.2nd-container:last-child .selected 
{}

如前所述，请将 2 替换为非数字，因为那样行不通。我被主要问题分心了。 :-)

Answer 2

首先，您不能使用数字作为类或 ID 的开头。

其次，你只需要在第二个元素的第一个和最后一个子元素上做一个查找，你应该能够找到你需要的元素。

.box {
  height: 20px;
  width: 400px;
  background: blue;
}
.box.selected {
  background: red;
}
.two-container:first-child .box.selected,
.two-container:last-child .box.selected {
  background: green;
}

<div class="one-container">
  <div class="two-container">
    <div class="three-container">
      <div class="box selected">// this div should have first-child pseudo elements</div>
      <div class="box"></div>
    </div>
  </div>
  <div class="two-container">
    <div class="three-container">
      <div class="box selected"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
  <div class="two-container">
    <div class="three-container">
      <div class="box selected">// this div should have last-child pseudo</div>
      <div class="box"></div>
    </div>
  </div>
</div>

Answer 3

使用 JS 看起来比 CSS 更容易：

var selected = document.querySelectorAll('.one-container .box.selected');

selected[0].style.background = selected[selected.length-1].style.background='green';

First-child 和 last-child 在不同的容器中

First-child and last-child in separate containers

html

css

containers

pseudo-element

FIDDLE