標題重寫為：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>