CSS 样式 :nth-child 甚至嵌套元素 [英] CSS style :nth-child even nested elements

查看：33 发布时间：2021/9/23 19:27:03 html css

本文介绍了CSS 样式 :nth-child 甚至嵌套元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

如何设置 :nth-child(4n) 即使元素嵌套在 div 中，这里的例子是 p 里面div:

p:nth-child(2) {背景:红色；}

<p>第一段.</p><div><p>第二段.</p>

第三段.第四段.

解决方案

body p:nth-child(2n) {背景:红色；}身体 div:nth-child(2n) p {背景:红色；}

<p>第一段.</p><div><p>第二段.</p>

第三段.第四段.

How can I style :nth-child(4n) even with the element is nested inside a div, example here is p inside div:

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

<p>The first paragraph.</p>
<div>
  <p>The second paragraph.</p>
</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

解决方案

body p:nth-child(2n) {
    background: red;
}
body div:nth-child(2n) p {
    background: red;
}

<body>
<p>The first paragraph.</p>
<div>
  <p>The second paragraph.</p>
</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<body>

这篇关于CSS 样式 :nth-child 甚至嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文