CSS：元素的样式继承者

Posted 2023-02-16

【中文标题】CSS：元素的样式继承者

【英文标题】：CSS: styling successors of an element

【发布时间】：2021-11-09 09:36:02

【问题描述】：

我在搜索什么

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

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

不是样式F，而是E 在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 相同

【问题讨论】：

不存在，最终可能。正常的解决方案是向父级添加一个类。

我可以从focused元素in CSS中向父级添加一个临时类吗？

没有。在纯 CSS 中，元素无法影响将哪些规则应用于树中（在前序遍历意义上）它之前的任何内容。

【参考方案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>

【讨论】：

您的回答无助于解决问题。在问题中，E 和 F 是 Elements 的变量。