如何在不知道父元素的情况下选择第n个元素？ [英] How can I select an nth element without knowing the parent element?

问题描述

我不知道在不知道父元素的情况下选择第n个元素，最后元素或第一个元素的方法。 nth-child 存在，但仅适用于儿童，例如：

I can't figure out a way of selecting the nth element, last element, or first element in cases where I don't know the parent element. nth-child exists, but only for children, for example:

<div>
   <p>One</p>
   <p>Two</p>
</div>

div：last-child 两个段落，并且 div：first-child 选择One段落。但是，当我有动态代码，不知道父名称是什么，甚至父母真正是什么（可能是一个div，span，anchor，ul等）？

div:last-child selects the "Two" paragraph, and div:first-child selects the "One" paragraph. But what about when I have dynamic code and have no idea what the parent name is, or even what the parent really is (may be a div, span, anchor, ul, etc.)?

例如：

<youdontknowwhat!>
   <p class="select-me">One</p>
   <p class="select-me">Two</p>
</youdontknowwhat!>

如何选择第二段？ （我不能选择 youdontknowwhat！，因为我真的不知道它是什么元素（它只是一个假设的名字）。

How do I select the second paragraph here? (I'm unable to select youdontknowwhat! since I really don't know what element it is (it's just a hypothetical name).

为什么有第一胎，最后一个孩子和 nth-child 选择器和NO ：first ，：last ，：nth （如 .select-me：first ）？

Why are there first-child, last-child, and nth-child selectors and NO :first, :last, :nth (like .select-me:first)?

推荐答案

要直接回答你的问题：如果只有一个元素会包含< p class =select-me> do：

To directly answer your question: if only one element will ever contain <p class="select-me"> paragraphs, this will do:

p.select-me:nth-child(2)

如果只有两个< p class =select-me> 在该元素中，选择以下之一：

If there will only be two <p class="select-me"> in that element, choose either one of these:

p.select-me:last-child /* CSS3 */
p.select-me:first-child + p.select-me /* CSS2, repetitive but most compatible */

---

现在，从阅读您的问题开始，我认为您误解了 * -child 选择器。选择器 div：first-child 和 div：last-child >

也就是说，此选择器：

---

Now, from reading your question, I think you're misunderstanding the *-child selectors. The selectors div:first-child and div:last-child don't do what you describe.

That is, this selector:

真的意味着

选择任何 E 元素

它是其父级的第一个子级。

而不是

选择 br>
any E 元素。

* - child 选择器是伪类，而不是伪元素。伪类适用于您附加到它们的相同选择器序列，就像将具体类附加到它们各自的选择器序列一样（如 p.select-me ）。伪类和常规类是相似的，因为它们都描述了您附加到它们的元素。伪元素，但是，指的是一个虚构的元素在你的结构中（这是绘制为真正的）。

Select the first child of
any E element.

你也可以说，他们在同一层次结构使用sibling组合器 + 或〜与

This is because the *-child selectors are pseudo-classes, not pseudo-elements. Pseudo-classes apply to the same selector sequences you attach them to, the same way you attach concrete classes to their respective selector sequences (as in p.select-me). Pseudo-classes and regular classes are similar in that they both describe the element that you attach them to. Pseudo-elements, however, refer to an imaginary element in your structure (that's drawn for real anyway).

对于上述选择器的示例：

You can also say that they're on the same hierarchy as elements that you use the sibling combinators + or ~ to build a relationship with.

An illustration, for the above selectors:

1. 未选择 >
   此< p> 是< div> 的子级。但是，它是它的第一个孩子，所以它不会匹配兄弟姐妹组合器或：nth-​​child（2）或：last-

1. Not selected
   This <p> is a child of the <div>. However, it is its first child, so it won't match after the sibling combinator or the :nth-child(2) or :last-child pseudo-classes.

已选择。

此< p> 是< div> 的子级。

未选择

这是一个< span> ，而不是< p> 。您正在寻找< p> 孩子，而不是< p> 的孩子。 >

Not selected
This is a <span> and not a <p>. You're looking for a <p> child, not a child of <p>.

另外，为了选择 元素的第一个子元素，您需要在：first-child 选择器和您最初附加到它之前的任何位置放置一个子组合器> p>

As an aside, in order to select the first child of an element, you would need to place a child combinator > between the :first-child selector and whatever you were originally attaching it to:

p.select-me > :first-child

使用相同的HTML示例：

Using the same example HTML for illustration:

<div>
    <p class="select-me">Text not in a span</p> <!-- [1] Not selected -->
    <p class="select-me">                       <!-- [2] Not selected -->
        <span>Text in a span</span>             <!-- [3] Selected -->
    </p>
</div>

1. Not selected
   This is a <p class="select-me"> element. However, although it's the first child, it's not the first child of another <p class="select-me"> element. Instead, it's the first child of a <div>.

1. 未选择 >
   这是一个< p class =select-me> 元素。然而，虽然它是第一个孩子，但它不是另一个< p class =select-me> 元素的第一个孩子。

Not selected
This is a <p> element, but it's not the first child of its parent, so :first-child doesn't match.

未选择

Given that selectors are parsed from right to left in most implementations, the p.select-me > part is then safely and immediately ignored.

由于选择器从右到左解析在大多数实现中， p.select-me> 部分会安全地被立即忽略。

已选择

此< span> < p class =select-me>

Selected
This <span> is the first child of a <p class="select-me">.

这篇关于如何在不知道父元素的情况下选择第n个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！