在自动前置#editableEl的CMS中，如何选择其父元素的兄弟#target？

我正在使用一款CMS，其中特定元素#editableEl内允许的CSS有限。我希望定位该元素父元素的兄弟元素，但棘手的是，CMS会自动将#editableEl前置到CSS编辑器中添加的任何选择器前。

比如添加如下CSS：

div {
  color: red;      
}

保存后系统会自动修改为：

#editableEl div {
  color: red;      
}

对应的HTML结构如下：

<div id="parentOfEditableEl">
  <div id="editableEl">
    user content goes here
  </div>
</div>
<div id="target">
  What I want to target
</div>

我知道CSS有:has选择器，理想情况下可以这样写：

#parentOfEditableEl:has(#editableEl) + div {
  // 样式代码
}

但CMS解析器会在保存时将#editableEl前置到开头，导致代码失效：

// 保存后的结果
#editableEl #parentOfEditableEl:has(#editableEl) + div {
  // 样式代码
}

因此我的问题是：当选择器必须以子元素#editableEl开头时，能否定位#target（即#editableEl父元素的兄弟）？是否存在我未知的CSS语法可实现该需求？

结论 #

仅靠纯CSS无法实现这个需求，核心原因如下：

• CSS选择器的匹配逻辑是从左到右，而CMS强制前置#editableEl后，所有选择器都会被限定为#editableEl的后代元素范围。但#target是#editableEl父元素的兄弟，属于#editableEl的外部平级元素，不在其后代链中，纯CSS无法突破这个范围限制。
• 即使是:has选择器，它实现父元素选择的前提是选择器的起始点为父元素，而非子元素。当#editableEl被强制放在最前面时，:has的作用范围被锁死在#editableEl内部，无法触及外部的#target。

替代方案 #

如果CMS允许嵌入少量JavaScript，可以通过JS实现目标效果：

// 找到#editableEl，获取其父元素的下一个兄弟元素
const editableEl = document.getElementById('editableEl');
const targetEl = editableEl.parentElement.nextElementSibling;
// 直接设置内联样式或添加自定义类
targetEl.style.color = 'red';
// 或者添加类（若CMS不会给类选择器加前缀）
// targetEl.classList.add('target-style');

若使用类选择器，可配合以下CSS（需确认CMS是否会对类选择器添加前缀）：

.target-style {
  color: red;
  /* 其他样式 */
}

内容的提问来源于stack exchange，提问作者rovac