如何在 CSS 中的后代元素之前 select 前两个子元素？

Question

我希望你做得很好。 我有以下代码：

<h2>Task 5</h2>
  <article id="task-5">
    <div class="marble"></div>
    <div class="marble"></div>
    <section>
      <div class="marble" data-target></div>
      <div class="marble" data-target></div>
      <section>
        <div class="marble"></div>
        <div class="marble"></div>
      </section>
    </section>
  </article>

我的问题是我怎样才能在 CSS 中对标有 data-target 属性的 div 进行 select。 此外，我不允许使用以下选择器： :nth-child:nth-last-child:nth-of-type:nth-last-of-type 任何使用 + 或 ~ data-target

谢谢你。

Answer 1

使用：

document.querySelectorAll('article > section > div');

选择所有<div>元素，其中父元素是<section>元素，其父元素是<article>元素。

https://jsfiddle.net/shwr20go/1/

Answer 2

div[data-target] { //code here }