如何 select 没有第n个伪类的元素的前两个孩子？

Question

我目前正在为高中生 web 开发的区域锦标赛做准备。 准备任务是锦标赛网站要解决的问题之一。 我有以下 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>

我的目标是 select 带有marble class 标有data-target的 div，但要满足以下要求：

• 我不允许使用这些 CSS 伪类或 CSS 选择器：
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :nth-last-of-type
  • [data-target]
  • 也没有使用+或~
• 只允许使用一个选择器。

我尝试了以下选择器，但它仍然选择了第三个div （未标记data-target的那个）：

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

你能帮我么。 非常感谢

Answer 1

首先，您可以 select 具有另一个节作为后代的节。 然后你可以 select 不是一个部分的后代的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>

参考：

• 子组合： > .

Answer 3

您可以通过 select 第一个孩子：

element:first-child

你可以 select 最后一个孩子：

element :last-child 

你有一些方法，比如：

• 不是（）
• 首创
• 最后一个类型