第一个孩子和最后一个孩子在不同的容器中答案

【问题标题】：First-child and last-child in separate containers第一个孩子和最后一个孩子在不同的容器中
【发布时间】：2015-10-13 21:18:19
【问题描述】：

我可以将 first-child 和 last-child 伪元素应用于不同子容器中具有相同类的 div 吗？在下面的示例中，带有“box selected”类的 div 都存储在“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 是否可行？

【问题讨论】：

没有:first-of-class伪。
这行不通，因为它们是父 div 的第一个子元素。
创建具有所需特征的 firstchild 和 lastchild 类，并将它们分配给元素。
你能写一个 CSS 规则你希望它看起来/工作的样子吗？我们试着让它工作。

标签： html css containers pseudo-element

【解决方案1】：

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

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

正如所指出的，将2 替换为非数字，因为这不起作用。我被主要问题分心了。 :-)

【讨论】：

谢谢拉尔夫，但问题是“第二个容器”的数量会有所不同，可以是 3 个，也可以是 123 个。无论如何，谢谢
数量无关紧要，只要它是您要定位的第一个和最后一个。

【解决方案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>

【讨论】：

太棒了，它成功了。我四处游荡，但从未想过将伪元素放入容器 div（我正在尝试.box.selected:first-child 的不同变体）

【解决方案3】：

用 JS 看起来比 CSS 更简单：

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

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

FIDDLE

【讨论】：