html - 第 nth-child() 和 blockquote css

Question

我有这个html代码

<blockquote>
    <cite>oioik wrote:</cite>

    <blockquote>
            <cite>oioik wrote:</cite>

            <blockquote>
                <cite>oioik wrote:</cite>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

我有这个CSS

blockquote {
    font-size: 13px;
    background-color: blue;
    border: 0;
    padding-left: 50px;
}
blockquote:nth-child(even) {
    background-color: red;
}

然后在我的示例中我应该有蓝色/红色/蓝色背景颜色但我有蓝色/红色/红色

Answer 1

child 和后裔 是有区别的。

所以如果你有:

 <blockquote>1</blockquote>
 <blockquote>2</blockquote>
 <blockquote>3</blockquote>

他们都是同一个 parent 的 child ，编号如图所示。

第二对是红色的，因为他们都是各自 parent 的第二个 child (第一个是 <cite> 元素。)

在这种情况下，我不相信 vanilla CSS 会实现您想要做的事情。您可能需要注入(inject)一个类名才能执行此操作。