如果放置在textarea元素之前，元素不会更改

Question

我有以下代码可以正常工作：

textarea:focus + #thing { filter: brightness(50%); }
#thing {
    background: #f0a;
    height: 200px;
    width: 200px;
    }

<textarea></textarea>
<div id="thing"></div>

目标得以实现

当用户单击文本区域时，指定的div元素（#thing）将收到50％的亮度过滤器。

但是有些东西...错了。将textarea放置在div元素之前时，所有内容都会中断，并且不再应用过滤器。这是一个例子：

textarea:focus + #thing { filter: brightness(50%); }
#thing {
    background: #f0a;
    height: 200px;
    width: 200px;
    }

<div id="thing"></div>
<textarea></textarea>

如您所见，如果向下滚动并与文本区域进行交互，则什么也不会发生。

我在做什么错？我所做的就是切换两个html标记。.

干杯。