时间戳

首页 > 解决方案 > 我无法在我的父类中选择我的第二段

html - 我无法在我的父类中选择我的第二段

问题描述

我有以下html

  <div class="parentt">
        <p>p 1</p>
        <p>p 2</p>
        <p>p 3</p>
    </div>

所以如果我想在我的 parentt 类中设置第二个 p 的样式，我会做

.parentt > p:nth-child(2) {
    border: 1px solid red;
}

但是当我的 html 混合时

<div class="parentt">
        <p>p 1</p>
        <h2>sdsd</h2>
        <p>p 2</p>
        <p>p 3</p>
    </div>

我把标签放在里面h2，我的 css 不再工作了，因为现在 nth-child 2 不是段落，而是 h2。

我怎样才能动态地首先选择里面的所有p，然后再选择里面的第二个p？

因为有时里面的第二个 pparrent可以出现在第 n 个孩子的数字 8 上。我不能每次都改变我的css。

标签： htmlcss

解决方案

在这种情况下，您可以使用nth-of-type而不是nth-child

.parentt > p:nth-of-type(2) {
    border: 1px solid red;
}
<div class="parentt">
        <p>p 1</p>
        <h2>sdsd</h2>
        <p>p 2</p>
        <p>p 3</p>
    </div>

推荐阅读