CSS：元素的样式继承者

Question

我在搜索什么

在 CSS 中：
E ~ F { } 代表前面有一个 E 节点的任何 F 节点。
我正在搜索任何被 F 节点成功的 E 节点

或者换句话说：
我想要E + F {} 之类的东西，但是

1. 不是样式F，而是E
2. 在F之前设置所有E

具体问题

我有一个兄弟元素列表。其中一些可能是.selected，其中一个可能是.focused，其中一些可能两者都不是。如果任何兄弟姐妹是.focused，则所有.selected 兄弟姐妹都应该以某种方式设置样式。
示例情况

<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>

在这个例子中 content1,3,4,6 应该以某种方式设置样式。

我有 content4 和 6 的解决方案，但我找不到 content1 和 3 的解决方案。

约束：

• 除了 CSS 之外我不能使用其他任何东西
• 我只能使用同级元素
• 这是针对 Gtk 的 CSS，但我想解决方案与通常的 CSS 相同

Answer 1

QUE：E ~ F { } 代表前面有一个 E 节点的任何 F 节点。 我正在搜索任何由 F 节点继承的 E 节点

答：你是对的，但是E ~ F { } 这仅适用于一个元素，而不适用于你需要使用 dot . 之类的类，例如 .selected.focused{ }。

.selected {
  background: #000;
  color: #fff
}
.selected.focused{
  background: green;
  color: #fff
}

<ul>
  <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>
</ul>