Question

如何选择第二个<p>标记的第二个<div>？

我们可以在CSS标签中关联任何层次结构吗？

以下是代码：

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(2) {
background: #ff0000;
}    
</style>
</head>
<body>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>

</body>
</html>

Answer 1

关于最广泛的浏览器支持，您可以使用+选择器与:first-child结合使用。

div + div p:first-child + p {color: red;}

https://jsfiddle.net/vkm2zuaq/

或使用:nth-child：

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

https://jsfiddle.net/vkm2zuaq/1/

Answer 2

nth-child将完成这项工作，请尝试使用代码

div:nth-child(2) p:nth-child(2){
   /*---- css code-------*/
}

Answer 3

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

还可以查看Chris Coyer撰写的这篇文章 - 它涵盖了该主题的所有答案：

CSS Tricks - how nth work

如何在div标签中分层选择一个特定的P标签

3 个答案: