CSS选择器问题：如何选中HTML树中的首个blockquote元素

要在.myclass容器中选中无论嵌套层级的第一个blockquote元素，可以参考以下两种方案：

方案1：CSS（现代浏览器适用） #

利用:has()伪类精准定位最外层的第一个blockquote，避免选中嵌套的子blockquote：

.myclass :has(blockquote):not(:has(:has(blockquote))) blockquote {
    /* 自定义样式示例 */
    border-left: 3px solid #ccc;
    padding-left: 10px;
}

原理：通过:not(:has(:has(blockquote)))排除包含嵌套blockquote的父元素，只选中最外层第一个出现的blockquote。

方案2：JavaScript（全浏览器兼容） #

如果需要兼容旧浏览器，用JS获取目标元素并添加样式类是最可靠的方式：

// 获取.myclass下的第一个blockquote
const firstBlockquote = document.querySelector('.myclass blockquote');
if (firstBlockquote) {
    // 添加自定义样式类
    firstBlockquote.classList.add('first-blockquote');
}

然后在CSS中定义样式：

.first-blockquote {
    border-left: 3px solid #ccc;
    padding-left: 10px;
}

为什么之前的方法失效？ #

• .myclass > div > div > blockquote：依赖固定的嵌套层级，邮件格式变化（比如多一层/少一层div）就会失效。
• .myclass blockquote:first-of-type：会选中每个父元素下的第一个blockquote，包括嵌套在目标blockquote内部的子元素，导致多选。

内容的提问来源于stack exchange，提问作者e-rwan