Question

我使用以下HTML（由codecademy提供）：

<ul>
    <li>
        <ol>
            <li>Start with the function keyword</li>
            <li>Inputs go between ()</li>
            <li>Actions go between {}</li>
            <li>jQuery is for chumps!</li>
        </ol>
    </li>
    <li>Inputs are separated by commas.</li>
    <li>Inputs can include other functions!</li>
</ul>

任务是淡出有序列表中的第四个项目，其中读取＆＃34; jQuery用于chumps！＆＃34;。以下标记为正确：

$(document).ready(function() {
    var $target = $("li:nth-child(4)");
    $target.fadeOut('fast');
});

我的问题是为什么我使用li:nth-child(4)代替ol:nth-child(4)？在我看来，后者说我正在删除父母的第四个孩子，即ol。但是，这只是完全删除了有序列表。有人可以解释这是如何工作的吗？

Answer 1

<TextBox x:Name="textBox2" Text="{Binding [0].TotalPrice}" />用于检查父元素，然后在顺序中查找子元素。

因此nth-child()用于检查列表项的父项li:nth-child(4)，然后检查列表项是否为ol的第4个子项。

如果你在这种情况下使用ol，那么它将计算淡出整个无序列表，这是父元素的第4个子元素，即ol:nth-child(4)（祖父母）

请注意，在下面的示例中，我为CSS添加了三个li标记来计算ol

ol:nth-child(4)

li:nth-child(4) {
  color: red; /* Select all list items which are 4th child item */
}

ol:nth-child(4) {
  color: lightblue; /* Select all unordered lists which are 4th child item */
}

Answer 2

根据docs

因为jQuery的实现：nth-选择器是严格派生的来自CSS规范

你应该看看这个选择器的CSS规范。 This为您提供答案：

：nth-child（an + b）CSS伪类匹配具有的元素对于给定的积极因素，在文档树中它前面有一个+ b-1个兄弟姐妹或n为零值，并具有父元素。更简单地说， selector匹配数字位置的多个子元素这一系列的孩子匹配模式an + b。

简而言之，它需要当前＆＃34;选择＆＃34;的父元素。一，并搜索包含你的元素的孩子。

其实我更喜欢this解释：

：nth-child（n）选择器匹配第n个元素孩子，无论其类型如何，都是其父母。

jquery nth child - 为什么在这种情况下使用li而不是ol？

2 个答案: