Javascript 侦听子选择器

CSS的惊人之处在于它本质上是反应性的。It活动侦听正确/错误的规则。那么，我怎样才能获得CSS对更改（表兄妹？）子选择器的反应性呢

像这样的

.loading-complete-message { display: none; } body .container .component01 .content-loaded /* rule */ { body .container .component02 .loading-complete-message /* targeted selector */ { display: block; /* change */ } } .正在加载完整消息{ 显示：无； } body.container.component01.content-loaded/*规则*/ { body.container.component02.loading complete message/*目标选择器*/ { 显示：块；/*更改*/ } } 当

.component01

动态接收子选择器

加载的内容时，

更改

.component02

子选择器

。将完整消息加载到
显示：block

这是否仅适用于CSS

有香草JS的等价物吗

谷歌搜索似乎表明只有框架才能做到这一点

必须有一种最小的、轻量级的、跨浏览器（不是IE）的方法来实现这一点，而不需要使用一个包罗万象的整体框架、它的依赖关系、构建过程和数小时的启动时间，以便在IMHO中实现这一单一但强大的功能

任何帮助都将不胜感激

TIA
不完全正确，但是如果您可以将
.content loaded
类添加到
.component01
中，那么组合选择器和相邻选择器在这里应该会有所帮助

.component01.content-loaded + component02 .loading-complete-message {
    display: block;
}

显然不是。。。对于JS解决方案，您可以在component01子级的class属性上放置一个mutationObserver，如果观察到一个，则测试其当前包含的加载内容，并为.component02.loading complete message添加样式以显示：block。（子代是直系后代吗？如果不是，则需要一些迭代）。