前面的空格是什么：nth-​​child（n）呢？

Question

虽然我正在编写一些CSS，但在使用:nth-child(n)之前我从未遇到的情况出现了，我怀疑实际发生了什么。

当我使用伪类时，我在选择器之间没有空格的情况下编写它们，如下所示：

div#wrap:hover {
    border-bottom: 2px solid orange;
}
/* OR */
div#wrap:nth-child(4) {
    border-bottom: 2px solid orange;
}

但它没有按照我预期的方式工作，所以我尝试在选择器和伪类之间插入一个空格。令人惊讶的是，它起作用了：

div#wrap :nth-child(4) {
    border-bottom: 2px solid orange;
}

使这项工作发生了什么变化？

＆＃13;

＆＃13;

div#wrap :nth-child(4) {
  border-bottom: 2px solid orange;
}

＆＃13;

<div id="wrap">
  <h1>Heading 1</h1>
  <p>This is a test!</p>
  <h2>Creating content</h2>
  <p>The next paragraph uses the <strong>.html</strong> method to create a new element.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

空间有什么作用？

:nth-child(4)之前的空格等于*:nth-child(4)。 *是一个全局CSS选择器。因此，如果 任何 子元素在 任何 父元素的元素列表中排在第4位，则会应用CSS规则那个元素。

但在#wrap之前使用nth-child会限制#wrap元素中的选择范围。

替代解决方案（了解nth-child如何运作）：

您还可以使用：p:nth-child(4)定位段元素，该元素相对于父元素#wrap为第4个。

无论元素是什么，或兄弟元素是什么，

:nth-child都会选择。您需要使用:nth-of-type来区分。

* {
  font-family: Helvetica;
}
p:nth-child(4) {
  border-bottom: 2px solid orange;
}
p:nth-of-type(2) {
  background: lightblue;
  color: #fff;
}

<div id="wrap">
  <h1>Heading 1</h1>
  <p>This is a test!</p>
  <h2>Creating content</h2>
  <p>The next paragraph uses the <strong>.html</strong> method to create a new element.</p>
</div>