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>，这是:first-of-type的一个（不一定是直接的）孩子}。
与:last-of-type，article *>p的任何选择器组合
- 因为这也会选择第一个/最后一个main>article p:first-of-type
- 特别是我尝试过main>article p:first-of-type和~。
覆盖+和/或<p>

EDITS

DOM不一定与示例中给出的相同 - 毕竟它只是一个例子。
第一个和最后一个<p>都是文章的孩子，但并不总是直接的孩子。这意味着在第一个/最后一个<article>和父$('main>article p:first')之间可能存在其他元素。
记得jQuery。来自jQuery的$('main>article p:last')和{{1}}会完全按照我的意愿行事，但我只限于CSS。

Answer 1

您可以使用first-of-type / last-of类型，您可以选择具有元素类型的父级的第一个/最后一个孩子

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

Answer 2

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

就像你如何使用相邻的兄弟（+）和一般兄弟（~）组合器来应用之后某个选择器的样式一样，但不是之前它

Answer 3

这解决了问题：

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

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

FIDDLE

或者这个：

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

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

FIDDLE

Answer 4

简单。

var test= new Array("first","second","third","four","five");
var first = test[0];
var last = test.reverse()[0];
console.log(first, last);

哎呀！但那不是css：）

仅设置第一个匹配和最后一个匹配的样式

4 个答案: