CSS :focus-within 选择器，用于具有 iframe 子元素的元素

我有一个这样的场景：

.container {
  background: yellow;
  padding: 40px;
}

.container:focus-within {
  background: red;
}

iframe {
  background: white;
}

<div class="container">
  <input type="text" placeholder="Input 1">
  <iframe srcdoc="<input type='text' placeholder='Input 2'>"></iframe>
</div>

正如您所看到的，当我单击输入 1 进行输入时，容器会变成红色，因为:focus-within选择器。但是当我聚焦输入 2（在 iframe 内）时，它却没有。

是否可以使用 CSS 选择器.container因为 iframe 内的某些内容是否获得焦点？我也可以控制 iframe 内的 CSS。

不是通过CSS，而是通过jQuery，您可以在输入2聚焦时将类添加到容器，并在失去焦点时删除类。

<style>
 .container:focus-within, .container.in_iframe {
            background: red;
        }
</style>

<script>
    $('document').ready(function () {
        $('#iframe').on('load', function () {
            var iframe = $('#iframe').contents();
            iframe.find("input").on('focus', function () {
                $('.container').addClass('in_iframe');
            });
            iframe.find("input").on('focusout', function () {
                $('.container').removeClass('in_iframe');
            });
        });
    });
</script>

完整代码：https://codepen.io/peker-ercan/pen/PdgEOy https://codepen.io/peker-ercan/pen/PdgEOy