2

如何仅针对 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>

下的 DOM<article>可能有<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>.
  • :first-of-type与,的任何选择器组合:last-of-type
    • 因为这也会选择第一个/最后一个article *>p
    • 特别是我尝试过main>article p:first-of-type和main>article p:first-of-type.
  • 覆盖~和/或+

编辑

  1. DOM 不一定与示例中给出的相同——毕竟这只是一个示例。
  2. first 和 last<p>都是 article 的子项，但并不总是直接子项。<p>这意味着在 first/last和 parent之间可能还有其他元素<article>。
  3. 只记得jQuery。$('main>article p:first')并且$('main>article p:last')从 jQuery 中可以完全满足我的要求，但我仅限于 CSS。
4

3 回答 3

2

您可以使用第一个类型/最后一个类型您可以选择具有元素类型的父级的第一个/最后一个子级

p:first-of-type

或者

p:last-of-type

这将选择第一个或最后一个段落元素，它是父元素的子元素

p:first-child

或者

p:last-child

类似于 last-of-type

W3 学校对此也有一些很好的信息

http://www.w3schools.com/cssref/css_selectors.asp

于 2013-04-16T17:54:38.513 回答
1

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

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

于 2013-04-16T18:58:19.220 回答
-1

这解决了这个问题： 

article section > p:first-child {
    color: red;
}

article > p:last-child{
    color: red;
}

小提琴

或这个： 

main p:first-child {
    color: red;
}

main article > p:last-child{
    color: red;
}
article > ul p{color:black !important;}

小提琴

于 2013-04-16T18:03:18.957 回答