:nth- child(n)前面的空格是什么?

问题描述 投票:1回答:3

[虽然我编写了一些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;
}

使这项工作发生了什么事?

div#wrap :nth-child(4) {
  border-bottom: 2px solid orange;
}
<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>
css css-selectors
3个回答
5
投票

您误解了选择器。它选择也是:nth-child(n)的元素,其中也具有前一个元素作为父元素。

当前面没有选择器时,默认为*:nth-child(n)

因为您可能只想将其应用于直接后代,而不是将每个元素应用到其父代的第四个子代和父代的后代,所以我将使用.element > *:nth-child(n)仅应用于直接后代。]

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

div#wrap > *:nth-child(4) {
  border-bottom: 2px solid orange;
}
<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>

如果您想更具体一些,并且仅选择第四个子元素(如果它是<p>元素,则可以使用.element > p:nth-child(n)。这将选择所有<p>元素,它们是与div#wrap选择器匹配的元素的第四个直接后代。

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

div#wrap > p:nth-child(4) {
  border-bottom: 2px solid orange;
}
<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>

如果要选择直接从每个<p>降序的第二个div#wrap元素,则可以像这样使用.element > p:nth-of-type(n)

div#wrap > p:nth-of-type(2) {
  border-bottom: 2px solid orange;
}

div#wrap > p:nth-of-type(2) {
  border-bottom: 2px solid orange;
}
<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>

2
投票

该空间做什么?


1
投票
© www.soinside.com 2019 - 2024. All rights reserved.