选择没有 class 的特定容器

Question

我的编码挑战有问题，不允许我使用 :nth-child、+、~ 或 css 中的数据目标。我也无法编辑 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>

Answer 1

由于您不能使用 nth-child，您可以 select 最接近它的是 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>

阅读更多相关信息select或在此处： https://www.w3schools.com/cssref/sel_nth-of-type.asp

选择没有 class 的特定容器

selecting a specific container without a class

html

css

css-selectors