如何选择没有:n个伪类的元素的前两个子类？

Question

我目前正在为高中学生的网络发展区域锦标赛做准备.准备工作是锦标赛网站要解决的问题之一。我有以下HTML代码：

<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>

我的目标是选择带有标记为marble的data-target类的div，但如下所示：

我不允许使用这些CSS伪类或CSS选择器：

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• [data-target]
• nor使用+或~

• 只允许一个选择器。

我尝试了以下选择器，但它仍然选择第三个div (没有用data-target标记的那个)：

#task-5 section > div:not(:last-child):not(:is(:first-child:is(:last-child)))

你能帮帮我吗。非常感谢

Answer 1

首先，您可以选择另一个节作为子代。然后，您可以选择非节的后代的div。

​

section:has(section) div:not(section section div) {
  width: 100px;
  height: 100px;
  background: red;
}

<h2>Task 5</h2>
<article id="task-5">
  <div class="marble">1</div>
  <div class="marble">2</div>
  <section>
    <div class="marble" data-target>3</div>
    <div class="marble" data-target>4</div>
    <section>
      <div class="marble">5</div>
      <div class="marble">6</div>
    </section>
  </section>
</article>

​

注意:当前:只有在设置了标志时，Firefox才支持has。

Answer 2

据我所知，从你发布的约束条件来看，最简单的答案是：

/* this uses the child combinator (`>`) to select
   the <div> elements which are the children of
   a <section> which is in turn a child of an
   <article>: */
article > section > div {
  background-color: lime;
}

​

*,
 ::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  margin-inline-start: 10%;
  padding: 0.5em;
}

div {
  border: 1px solid #000;
  margin-inline-start: 10%;
  min-block-size: 2em;
}

article>section>div {
  background-color: lime;
}

<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>

​

参考文献：

• Child combinator: >.

Answer 3

您可以通过以下方式选择第一个孩子：

element:first-child

你可以选择最后一个孩子：

element :last-child 

你有一些方法，比如：

• not()
• first-of-type
• last-of-type