如何正确使用nth-child？ [英] How to use nth-child correctly?

查看：89 发布时间：2020/10/12 2:34:44 css

本文介绍了如何正确使用nth-child？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我正在尝试在Codecademy上学习如何正确使用nth-childs。

  p：nth-child（2）{
颜色：红色； 
}

将其父元素第二个子元素的每个段落都设为红色。 / p>

所以我认为这意味着

  body：nth-child（ 2）{
颜色：红色； 
} 
 
< body> 
< p>一些文本< / p> 
< p>一些文本< / p> 
< / body>

这意味着第二段将变为红色。但这不起作用...我在做什么错了？

解决方案

使用

  body：nth-child（2）{
颜色：红色； 
}

如果要，您选择的第二个body元素根本不存在要获得正文中的第二个p元素，您必须编写：

  body p：nth-child（2）{
颜色：红色； 
}

I'm trying to learn on Codecademy how to use nth-childs correctly. It says that

p:nth-child(2) {
    color: red;
}

Would turn every paragraph that is the second child of its parent element red.

So I thought it meant that

body:nth-child(2) {
    color: red;
}

<body> 
<p> some text </p> 
<p> some text </p>
</body>

Would mean that the second paragraph would turn red. But that doesn't work... What am I doing wrong?

解决方案

With

body:nth-child(2) {
    color: red;
}

you are selecting the second body element which is simply not there, if you want to get the second p element in body you have to write:

body p:nth-child(2) {
    color: red;
}

这篇关于如何正确使用nth-child？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文