nth-child没有针对正确的元素？

Question

.test:nth-child(1),
.test:nth-child(2),
.test:nth-child(3) {
  color: #0F0
}

<div class="test">
  <p>Test</p>
</div>
<div class="reuinIt">
  <p>Test</p>
</div>
<div class="test">
  <p>Test</p>
</div>
<div class="test">
  <p>Test</p>
</div>

https://jsfiddle.net/dkfj2xzj/13/＆lt; - UPDATED 使用我的jQuery代码（如果有帮助）

为什么不跳过.ruinIt课程而不是定位第三个.test？ 我正在动态添加<div>，当添加<div>而没有.checkDrop类时，我需要才能跳过它。

由于

Answer 1

这是因为nth-child选择器并不意味着它是该特定类的 nth 。这意味着它总是 nth 兄弟。

因此nth-child(2)引用了您的.reuinIt类，但它也没有.test类，因此它没有收到任何样式。

您的上一个 .test类是nth-child(4)，但没有应用样式规则。

如果您想查看一个有效的示例，我已更新了您的fiddle here。

实施例

：nth-​​child

这里需要记住的重要一点是:nth-child选择器根据其元素/父元素中的索引/位置专门定位HTML元素。

查看下面的示例，并注意相应的注释:nth-child选择器的索引如何继续递增，而不管它所针对的元素类型。

<div id="container">
    <h1>Heading 1</h1>   <!-- h1:nth-child(1) -->
    <p>Paragraph 1</p>   <!-- p:nth-child(2)  -->
    <p>Paragraph 2</p>   <!-- p:nth-child(3)  -->
    <h2>Heading 2</h2>   <!-- h2:nth-child(4) -->
    <p>Paragraph 3</p>   <!-- p:nth-child(5)  -->
</div>

：nth-​​of-type

关于:nth-of-type的一个很酷的事情是它忽略了所有其他不同类型的元素，即如果你所定位的元素是<p>，它将忽略所有在计算索引时包含“非<p>”元素。

以下示例将为您提供:nth-of-type遵循的索引规则的基本知识：

<div id="container">
    <h1>Heading 1</h1>   <!-- h1:nth-of-type(1) -->
    <p>Paragraph 1</p>   <!-- p:nth-of-type(1)  -->
    <p>Paragraph 2</p>   <!-- p:nth-of-type(2)  -->
    <h2>Heading 2</h2>   <!-- h2:nth-of-type(1) -->
    <p>Paragraph 3</p>   <!-- p:nth-of-type(3)  -->
</div>

稍微复杂一点：nth-​​of-type

然而，记住:nth-of-type基于 HTML元素类型的索引值是非常重要的，无论您使用哪个CSS类来调用该属性。

看看下面的例子：

<div id="container">
    <h1>Heading 1</h1>                    <!--        h1:nth-of-type(1) -->
    <p class="my-class">Paragraph 1</p>   <!-- .my-class:nth-of-type(1) -->
    <p>Paragraph 2</p>                    <!--         p:nth-of-type(2) -->
    <h2 class="my-class">Heading 2</h2>   <!-- .my-class:nth-of-type(1) -->
    <p class="my-class">Paragraph 3</p>   <!-- .my-class:nth-of-type(3) -->
    <h1 class="my-class">Heading 3</h1>   <!-- .my-class:nth-of-type(2) -->
</div>

此示例稍微复杂一些，但如果您将CSS声明视为一种过滤规则，则会有所帮助。例如，如果通过键入：

创建CSS声明

.p:nth-of-type(2) {
  background-color: red;
}

我基本上是在告诉浏览器2件事：

1. 只有<p>个标签会受到影响，
2. 只有当他们是兄弟姐妹中的第二个<p>标签时

当我编写看起来像这样的CSS时，难度就出现了：

.my-class:nth-of-type(1) {
  background-color: red;
}

未指定元素类型，我的规则基本上是使用以下过滤器读取的：

1. 只有属于my-class类的元素才会受到影响，
2. 只有这些元素是其元素类型的第一个兄弟。

如果要将上述CSS应用于示例（see fiddle for working example）中的HTML，我们会得到如下所示的输出：



在上面的输出中，无论其兄弟姐妹是否应用了<h2>类名，您都会看到第一个<p>和第一个my-class元素都受到影响。

Answer 2

代码<style name="Theme.Transparent" parent="android:Theme"> <item name="android:windowIsTranslucent">true</item> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowContentOverlay">@null</item> <item name="android:windowIsFloating">false</item> <item name="android:windowNoTitle">true</item> <item name="android:backgroundDimEnabled">true</item> </style> 并不意味着“其容器中类.test:nth-child(2)的第二个元素”。这意味着“只有test类的元素和是其容器的第二个子元素。”

您期望的行为可以CSS Selectors 4表示为test。不幸的是，目前支持此语法only in Safari。

Answer 3

尝试以下代码来定位nth-child：

您可以先为所有子div设置父div。

＆＃13;

＆＃13;

.parent_div .test:nth-child(1) {
  color: red;
}
.parent_div .test:nth-child(3) {
  color: red;
}
.parent_div .test:nth-child(4) {
  color: red;
}

＆＃13;

<div class="parent_div">
<div class="test">
   <p>Test</p>
</div>
<div class="reuinIt">
   <p>Test</p>
</div>
<div class="test">
   <p>Test</p>
</div>
<div class="test">
   <p>Test</p>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

.test:nth-child(2)选择器表示当它是父项的第二个子项时，选择具有类.test的元素。同样地，.test:nth-child(3)将选择父级的第3个元素，如果它将具有.test类。

在你的情况下，第二个元素没有.test类，所以它没有选择它。如果你想要定位第3个div元素，你需要使用.test:nth-child(3)（因为它是其父元素的第3个元素，而不是第2个元素）。

正确的选择器将是：

.test:nth-child(1), .test:nth-child(3), .test:nth-child(4) {color: #0F0;}

Answer 5

你可以试试这个：

.test:nth-child(1),
.test:nth-child(2),
.test:nth-child(3) {
  color: #0F0
}

<div class="test">

  <p>Test</p>
  <p>Test</p>
  <p>Test</p>

</div>

<div class="reuinIt">
  <p>Test</p>
</div>

Answer 6

＆＃13;

＆＃13;

.test:nth-child(1), .test:nth-child(3), .test:nth-child(4)
{color: #0F0}

＆＃13;

<div class="test">
  <p>Test0</p>
</div>
<div class="reuinIt">
  <p>Test1</p>
</div>
<div class="test">
  <p>Test2</p>
</div>
<div class="test">
  <p>Test3</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 7

您对 nth-child ＆amp;的使用感到困惑。的第n的型即可。 nth-child将考虑所有标签和所有元素。如果您想专门计算某种类型的元素或类，请不要使用nth-child。去找第n类。但是，此外 nth-of-type目前不支持类 ，尽管它适用于html标记（可能将来会得到支持）。您需要做的就是将第n个孩子的数字更改为1,3,4。这是您获得结果的唯一方法。

小提琴：https://jsfiddle.net/jw66uj1p/

.test:nth-of-type(1),
.test:nth-of-type(3),
.test:nth-of-type(4) {
  color: #0F0
}