Question

我的html页面有问题。在这种情况下，为什么p属性的第一个元素被认为是第二个元素？

/* This won't work */
#div1 p:nth-child(1) {
  background: #ff0000;
}

/* This will work */
#div2 p:nth-child(2) {
  background: #ff0000;
}

<div id="div1">
  <h1>This is a heading</h1>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>

<div id="div2">
  <h1>This is a heading</h1>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>

http://jsfiddle.net/34bz28a0/

谢谢

Answer 1

您需要使用nth-of-type(1)而不是nth-child()，因为后者将计算顺序，而不考虑元素类型。

p:nth-child(1)将无效，因为该段落不是父级的第一个元素。

＆＃13;

p:nth-of-type(1) {
  background: #ff0000;
}

＆＃13;

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

＆＃13;

Answer 2

nth-child计算与父项相关的子元素数。如果您只想计算p个元素，则应使用nth-of-type，即

p:nth-of-type(1) {
    background: #ff0000;
}

Your updated JSFiddle

Answer 3

您可以使用:first-child伪选择器。

试试这个：

#div1 p:first-child {
  ...
}

Answer 4

使用p:nth-child(1)时选择器无法正常工作的原因是，选择器的工作方式与 IF 语句之间的 AND 不同由一些说明符分隔（例如空格字符或>，~等）。例如，选择器div.myClass匹配类<div>的{{1}}个元素。伪类的保持：myClass匹配正在悬停的div:hover个元素。在您的情况下，组合为<div>，它会在文档树中选择具有0（公式为 a + b-1 ）兄弟的p:nth-child(1)元素，并且没有这样的元素。使用<p>，您获得的第二个元素也是p:nth-child(2)。

就解决这个问题而言，最明显的解决方案是使用<p>选择第二个兄弟，无论其类型如何，或:nth-child(2) ¹（或简称{{} 1}}）匹配p:nth-of-type(1)类型的第一个元素。

¹关于p:first-of-type的注释：此伪类与其类型的n _th元素匹配，而不管前导类型选择器如何。请参阅下一个代码段：

＆＃13;

<p>

＆＃13;

nth-of-type(an+b)

＆＃13;

CSS3 nth：子号码

4 个答案: