Question

我开始对>，:nth-child()和:nth-of-type()感到困惑。

我有：

<div class="entry-content">
    <div class="first-img">
        <img />
    </div>
    <div class="first-box">
        <blockquote></blockquote>
    </div>
    <blockquote></blockquote>
</div>

我想在blockquote中直接设置第一个.entry-content的样式（这意味着这是示例中的第二个blockquote）但不是第一个blockquote }它位于div .first-box。

我尝试.entry-content > blockquote:nth-child(2)，也.entry-content:nth-of-type(2)，但他们无效。

.entry-content > blockquote是否意味着：

我只选择直接在条目内容中的块引用，或
直接在条目内容中的所有块引用（不在其他div中）以及div中的那些？

Answer 1

您实际需要使用的选择器是：

.entry-content > blockquote:nth-of-type(1) {
  /* styles */
}

所有:nth-*，*-child选择器仅适用于共享公共父级的元素。在问题中提供的HTML中，直接位于blockquote下的.entry-content是其类型中的第一个，因此您应该使用nth-of-type(1)来选择它而不是{{1} }}

nth-of-type(2)

.entry-content > blockquote:nth-of-type(1) {
  background: red;
}

现在有关其他选择器的解释（无论是不起作用还是未尝试过）：

<div class="entry-content"> <div class="first-img"> <img /> </div> <div class="first-box"> <blockquote>Descendant</blockquote> </div> <blockquote>Child</blockquote> </div> - 如果它恰好是第二个孩子，这将选择.entry-content > blockquote:nth-child(2)直接存在于blockquote元素下的class='entry-content'。此处div之前有两个blockquote子元素，因此blockquote为nth-child(3)。
.entry-content > blockquote:nth-of-type(2) - 只有一个blockquote类型的元素直接位于带有class='entry-content'的元素下，因此不会选择任何内容。
.entry-content > blockquote - 这将选择直接出现在blockquote元素下的所有class='entry-content'元素，因此不会选择{{1}元素下的元素。 }。这是因为class='first-box是子选择器，只选择直接存在于引用元素下的元素。
> - 这与上面的内容非常相似，但由于缺少.entry-content blockquote，它实际上会选择所有>元素，这些元素是blockquote元素的后代，因此，它会选择所提供的HTML中存在的class='entry-content元素。
blockquote - 问题中提供的这个选项与其他选择器相比是一个不同的选择器。如果它还有.entry-content:nth-of-type(2)，则选择每种类型的第二个元素（在共同父项下）。

Answer 2

<div class="entry-content">
    <div class="first-img">
        <img />
    </div>
    <div class="first-box">
        <blockquote></blockquote>
    </div>
    <blockquote></blockquote>
    <p>
        <blockquote></blockquote>
    </p>
    <blockquote></blockquote>
</div>

.entry-content > blockquote将仅选择第一级块引用。在我的示例中，<blockquote>之前和之后<p>都是.entry-content blockquote。

<blockquote>会选择每个cancelbtn()

Answer 3

nth-child()从0开始，例如，如果你有一个HTML代码：

<div id="main">
     <div>text1</div>
     <div>text2</div>
</div>

CSS选择器#main > div:nth-child(0)将选择“text1”所在的div。 CSS选择器#main > div:nth-child(1)将选择“text”为的div：

第一种类型和儿童

3 个答案: