选择没有类的特定容器

【问题标题】：selecting a specific container without a class选择没有类的特定容器
【发布时间】：2022-02-07 23:44:49
【问题描述】：

我的编码挑战有问题，我不允许在 css 中使用 :nth-child、+、~ 或数据目标。我也无法编辑 HTML。是否有任何解决方案可以在没有上述语法的情况下获取<section> 中的第二个元素？感谢您的帮助

<article id="task-2">
        <div class="marble"></div>
        <section>
          <div class="marble"></div>
          <div class="marble" data-target></div>
        </section>
        <div class="marble"></div>
      </article>

【问题讨论】：

:last-child(), :nth-last-child()

标签： html css css-selectors

【解决方案1】：

由于您不能使用nth-child，因此您可以选择最接近它的是nth-of-type，因此您可以执行以下操作：

section div {
  height: 30px;
  border: solid 1px yellow;
}
section div:nth-of-type(2) {
  background-color: blue;
}

<article id="task-2">
        <div class="marble"></div>
        <section>
          <div class="marble"></div>
          <div class="marble" data-target></div>
        </section>
        <div class="marble"></div>
      </article>

在此处阅读有关此选择器的更多信息： https://www.w3schools.com/cssref/sel_nth-of-type.asp

【讨论】：

我们不应该使用 :nth-child。
@AbhilashAsokan：那么这个答案不使用:nth-child()非常方便。