当前位置: 首页 > 面试题库 >

:nth-​​child(n)前面的空格有什么作用?

濮冠宇
2023-03-14
问题内容

当我编写一些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>直接从each降序的第二个元素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>


 类似资料:
  • 问题内容: 我正在尝试更改div内奇数div的样式。由于某种原因,当它位于另一个div内时,它会影响我的所有div。这是我的常规div和奇数div的代码: 出于某种原因,当将其包裹在我的div中时不起作用,但是当它们不包裹在任何div中时却起作用。 未包装在div中时的工作版本: ``如何使初始代码与上述代码相同? 问题答案: 类似于它们必须全部来自同一父级。如果需要这些包装器,请改用这些包装器:

  • 本文向大家介绍css3的:nth-child和:nth-of-type的区别是什么?相关面试题,主要包含被问及css3的:nth-child和:nth-of-type的区别是什么?时的应答技巧和注意事项,需要的朋友参考一下 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素。 n

  • 问题内容: 我需要将表的每两行设置为灰色,如果可能的话,我希望使用nth-child。 我已经和克里斯·科耶尔(Chris Coyier)的第一个孩子测试员混为一谈,但仍然无法[理解。 我需要以下公式: 等等。我不希望在html中放置一个类,因为我敢肯定这将是一些建议。如果有办法与nth-child合作,这就是我想要的。 问题答案: 意识到您正在做4组,那么您可以看到每个第4个元素和每个第4个元素

  • 问题内容: 我检查这个选择器: 选择器不起作用? 我在firefinder中检查了此内容,但没有返回任何内容(没有信息显示零元素) 然后检查: 并返回h3,所以选择器几乎是不错的选择,但是this(h3的文本为’a’)的文本出错。 问题答案: 不是 原本是CSS3选择器感谢TJCrowder的链接,但它没有做到,很可能是因为它的工作方式往往会导致严重的性能和过度选择问题。例如,如果元素匹配给定的字

  • 问题内容: 这是我的CSS: 工作,现在到处(用这个在我的网站),除了Internet Explorer 8中...... 是否有可能在IE8中使用nth-child?这是该浏览器的最差版本,无法正常工作,我找不到解决方法。 @ edit2:我刚刚注意到 实际上是在IE8中工作!但是这个: 不管用。那么发生了什么? 问题答案: 您可以(ab)使用相邻的同级组合器()通过可在IE7/ 8中使用的CS

  • 本文向大家介绍举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?相关面试题,主要包含被问及举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?时的应答技巧和注意事项,需要的朋友参考一下 :nth-child(n): 选择当前元素的父元素下的第n个子元素(从1开始) :nth-of-type