CSS选择器技术问询：选中被指定节点跟随的兄弟节点及Gtk CSS场景实现方案

嘿，我明白你的需求了——你需要在一组兄弟元素里，只要存在带.focused类的元素，所有带.selected的兄弟（不管在.focused之前还是之后，包括.focused本身如果它也是.selected）都要应用特定样式，但目前只能选中.focused之后的.selected，前面的搞不定对吧？

其实CSS本身没有原生的前向兄弟选择器（就是反过来的E ~ F），但我们有两种靠谱的方法来解决这个问题，具体看你的环境支持情况：

方法1：用:has()伪类（最简洁，优先推荐） #

如果你的Gtk版本支持:has()（Gtk 4.6及以后支持，和现代浏览器逻辑一致），那这个方法简直完美。:has()允许我们基于子元素或兄弟元素的存在来选择父元素，然后我们就能一次性选中所有符合条件的.selected元素：

/* 假设你的row元素都包裹在一个父容器里（比如叫<rows>），当父容器里有.focused元素时，所有.selected的row都应用样式 */
rows:has(.focused) .row.selected {
  /* 这里放你的特定样式，比如： */
  background-color: #ffeb3b;
  color: #333;
}

如果你的.focused元素本身就是.selected（就像示例里的content4），这个选择器也会自动包含它，完全满足你的需求。

方法2：无:has()时的兼容方案（全局覆盖技巧） #

如果你的环境不支持:has()，我们可以用「先全局设置样式，再反向取消不需要的」思路：

1. 先给所有.selected元素设置目标样式；
2. 然后，当兄弟元素中不存在.focused时，把这些.selected的样式恢复成默认。

代码示例：

/* 第一步：给所有.selected设置目标样式 */
.row.selected {
  background-color: #ffeb3b;
  color: #333;
}

/* 第二步：当父容器里没有.focused元素时，取消.selected的样式 */
rows:not(:has(.focused)) .row.selected {
  background-color: inherit;
  color: inherit;
  /* 其他需要恢复的样式也在这里写 */
}

如果没法直接选择父容器，也可以用这个更绕但同样有效的写法（虽然可读性稍差）：

.row.selected {
  background-color: #ffeb3b;
  color: #333;
}

/* 选中所有既不在.focused之前，也不在.focused之后的.selected（也就是没有.focused兄弟时的情况），取消样式 */
.row.selected:not(:has(~ .focused)):not(.focused):not(:has(+ * ~ .focused)) {
  background-color: inherit;
  color: inherit;
}

针对你的示例的验证 #

拿你给出的结构测试：

<row class="selected"> content1</row>
<row class=""> content2</row>
<row class="selected"> content3</row>
<row class="selected focused">content4</row>
<row class=""> content5</row>
<row class="selected"> content6</row>
<row class=""> content7</row>

用:has()方案的话，content1、3、4、6都会被选中，完全符合你的要求。

小提示 #

• 记得确认你的Gtk版本：如果是Gtk 4.6以下，只能用兼容方案；
• 尽量用父容器来缩小选择范围，避免样式影响到页面其他地方的元素。

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