[虽然我编写了一些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>
您误解了选择器。它选择也是: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>
该空间做什么?