Question

我遇到了问题：我在 nth-child 语句中遇到了问题。这是HTML和CSS。我是＆＃34; CSS选择器23/23＆＃34; Codecademy的教训，在我弄明白之前无法前进：

HTML:
<body>
<h3 class="fancy">Blah Blah Blah </h>
 <p class="fancy">Blabbidy Blah</p>
 <p id="serious">Bling Bling</p>
 <p> problem child</p>
</body>

CSS:
body :nth-child(4) {
font-size: 26px;
}

Answer 1

body:nth-child(4)选择器selects the fourth sibling of body - 没有。您希望选择p元素。另请注意，元素选择器和伪选择器之间不应有空格。最后，您的h3元素未正确关闭。

也许像你这样的人就是你所追求的：

p:nth-child(4) {
  font-size: 26px;
}

<body>
  <h3 class="fancy">Blah Blah Blah </h3>
  <p class="fancy">Blabbidy Blah</p>
  <p id="serious">Bling Bling</p>
  <p>problem child</p>
</body>

Answer 2

您应该选择p元素

p:nth-child(4) {
  font-size: 26px;
}

<body>
  <h3 class="fancy">Blah Blah Blah </h3>
 <p class="fancy">Blabbidy Blah</p>
 <p id="serious">Bling Bling</p>
 <p> problem child</p>
</body>

Answer 3

您的问题是由于未能关闭h3代码造成的。

只需调整/更正，现有选择器就可以正常使用。

＆＃13;

body :nth-child(4) {
  font-size: 26px;
  color: red;
}

＆＃13;

<h3 class="fancy">Blah Blah Blah </h3>
<p class="fancy">Blabbidy Blah</p>
<p id="serious">Bling Bling</p>
<p>problem child</p>

＆＃13;

无法关闭代码会导致浏览器为您其余元素后执行此操作，如您在此JSFIDDLE中所见。因此，身体没有第四个孩子，选择器失败。

在Codecademy中调试HTML / CSS

3 个答案: