标题重写为：CSS > 选择树中的首个元素

Question

我一直在尝试仅选择电子邮件正文中的第一个blockquote，其大致如下：

<div class="myclass">
    <br><p></p>
    <div><div> <!--有时较少，有时较多的div-->
        <blockquote> <!--我想要选择的blockquote-->
            <div> <div> <br>
                <blockquote>
                    <等等...>
                </blockquote>
            </div> </div>
        </blockquote>
    </div></div>
</div>

问题是，格式可能因电子邮件而异，并且在第一个blockquote之前可能有一个或多个div，

因此使用：

.myclass > div > div > blockquote {}

并不总是有效，

这个：

.myclass blockquote:first-of-type {}

会选择每个blockquote

所以我只想选择无论其在html树上的位置如何的第一个blockquote。

Answer 1

像这样吗？选择容器.myclass的第一个嵌套的blockquote，但不选择任何作为第一个blockquote的子元素的blockquote。

.myclass blockquote:not(blockquote blockquote) {
  background-color: red;
}

<div class="myclass">
  <br>
  <p></p>
  <div>
    <div>
      <!--有时少有时多的div-->
      <blockquote>
        <!--我想选择的blockquote-->
        <div>
          <div> <br>
            <blockquote>
            </blockquote>
          </div>
        </div>
      </blockquote>
    </div>
  </div>
</div>