如何递归地选择类中的所有前置元素？

我有一个非常小的项目（html + css），其中的所有“ pre”标签都具有CSS样式。看起来像这样：

pre { color: blue; }

但是现在，我想将此添加到一个非常大的项目中，并且我不想破坏一切。我只想修改与该特定小物件相关的那些“ pre”标签。因此，我的想法是，将与之相关的所有内容都放入包装器“ div”元素的内部，只有那些“ pre”标签应受到包装器内部的CSS的影响，不管有多深

一个例子：

<pre> not this </pre>
<div> not this </div>
<pre> also not this one </pre>
<div class="wrapper">
    <pre> this should be affected </pre>
    <pre> this should be affected </pre>
    <pre> this should be affected </pre>
    <div>
        <h1>
            <span>
                <pre> This should be also affected, but it is sadly not working. </pre>
            </span>
        </h1>
    </div>
</div>

这是我的CSS，但这仅适用于顶级“ pre”标签：

.wrapper pre {
    color: blue;
}

如果我将CSS修改为此：

pre {
    color: blue;
}

这将适用于所有“ pre”元素，但问题是，我只希望对包装器元素内部的那些“ pre”元素使用它。

我该如何解决？我正在阅读关于CSS的stackoverflow和其他网站，我正在尝试解决此问题，但我无法弄清楚。谢谢。