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

我有一个非常小的项目(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和其他网站,我正在尝试解决此问题,但我无法弄清楚。谢谢。

评论
  • gut
    gut 回复

    The code you provided already works. Do you have more CSS rules in your other project that are maybe preventing your inner pres to not become blue?

    .wrapper pre {
        color: blue;
    }
    <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>