css - 仅设置第一场比赛和最后一场比赛的样式

Question

如何仅针对 CSS 中选择器的第一个和最后一个匹配项？

示例 (这只是一个示例，需要通用解决方案)来说明我的要求:

<style>
    main>article p:first { /* to select the first p anywhere under article */ }
    main>article p:last { /* to select the last p anywhere under article  */ }
</style>
<main>
    <article>
        <section>
            <p>SHOULD be selected as first element</p>
            <p>SHOULD NOT be selected</p>
        </section>
        <ul>
            <li><p>SHOULD NOT be selected</p></li>
            <li><p>SHOULD NOT be selected</p></li>
        </ul>
        <p>SHOULD be selected as last element</p>
    </article>
</main>

<article> 下的 DOM 可能将 <p> 作为子级。 <p> s(包括第一个和最后一个)不需要是 <article> 的直接子代，并且可以有任何父代。是否有任何不必要的优雅 CSS 规则只选择第一个和最后一个 <p> ？

这个问题的标签所指示的 JavaScript 是不允许的，但出于演示目的……以下代码正是我想要实现的:

var els   = document.querySelectorAll('main>article p'),
    first = els[0],
    last  = els[els.length - 1];

现在我已经尝试过使用什么对我没有用:

与 :first-child , :last-child 的任意选择器组合

无法保证可以使用任何结构来制作防故障选择器，该选择器只会选择第一个和最后一个 p ，它是 <article> 的(不一定是直接的) child 。

与 :first-of-type , :last-of-type 的任意选择器组合

因为这也会选择第一个/最后一个 article *>p

我特别尝试过 main>article p:first-of-type 和 main>article p:first-of-type 。

覆盖 ~ 和/或 +

编辑

DOM 不一定与示例中给出的相同——毕竟这只是一个示例。

第一个和最后一个 <p> 都是文章的 child ，但并不总是直接的 child 。这意味着在第一个/最后一个 <p> 和父 <article> 之间可能还有其他元素。

刚想起 jQuery。来自 jQuery 的 $('main>article p:first') 和 $('main>article p:last') 完全符合我的要求，但我仅限于 CSS。

Answer 1

不幸的是，不使用 JavaScript 就不可能做你想做的事(如你原来的问题所示)。当前没有可用的全局 nth-of-class 选择器。我相信这是因为元素的样式是一次性计算的。选择器没有真正的方法来了解 DOM 树其他分支中的元素。

就像如何使用相邻的兄弟( + )和一般的兄弟( ~ )组合子来应用 在某个选择器之后的 样式，但不在它之前。