选择嵌套在div层中的标签

Question

所有！

我遇到了彼此分开选择<p>的问题。我希望第一个<p class="a">的样式与第二个<p class="a">不同。

为那些<p>分配一个类/ id会更容易（并且不需要在这里询问）但是我不能这样做，因为我使用的是WordPress主题。

<div class="wrapper">
    <div>
        <div>
            <div>
                <p class="a"></p>
                <p class="b"></p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <p class="a"></p>
                <p class="b"></p>
            </div>
        </div>
    </div>
</div>

谢谢！

Answer 1

这个怎么样：

＆＃13;

＆＃13;

.wrapper > div:first-child p.a {
  color:red;
}
.wrapper > div:last-child p.a {
  color:blue;
}

＆＃13;

<div class="wrapper">
    <div>
        <div>
            <div>
                <p class="a">aa</p>
                <p class="b">bb</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <p class="a">aa</p>
                <p class="b">bb</p>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用nth-of-type和直接后代选择器选择它。

如果这是确切的结构而且<{1}}

中除了<p>之外没有任何其他元素，那么

nth-child也可以工作

＆＃13;

＆＃13;

<div>

＆＃13;

.wrapper > div:first-of-type p.a {
  color:blue;
}
.wrapper > div:nth-of-type(2) p.a {
  color:pink;
}

＆＃13;

＆＃13;

＆＃13;