纯 CSS 方式为兄弟元素分配颜色（无 JS）

Question

我在服务器端渲染了导致此 HTML 的代码

<div>
  <span> black/no color text </span>
  <span class="degraded"> red colored text <span>
</div>

.degraded class 将元素的颜色设置为红色，但取决于 css class 的设置也可以是.available 或.unknown，这将影响文本的颜色。

无论如何仅使用 css 或 html 数据属性等来使第一个跨度与第二个跨度相同？ 我事先不知道第二个跨度的颜色

更新：对不起，如果我解释得不好。 第二个元素中的 class 可以是任何东西，.degraded 等只是占位符，我事先不知道 class 名称，所以我不能在 ZC7A628CBA22E28EB167B5F5C6AE2A2 中使用 + 选择器设置同级。 我需要以某种方式告诉第二个第一个跨度采用第二个跨度的颜色。 我可以重新排列 div 中元素的顺序

Answer 1

是的，您可以使用 css 的相邻兄弟选择器（目标元素 + 兄弟元素），它选择所选元素的第一个兄弟元素（在这种情况下，第一个跨度 next to.degraded）。 我在下面包含了一个演示。

 .degraded, .degraded + span { color: red; }

 <div> <span class="degraded"> red colored text </span> <span> black/no color text </span> <span> not selected </span> </div>

Answer 2

是的，有办法。 相邻兄弟组合子

<style>
    .degraded {
        color: red;
    }

        .degraded + span {
            color: red;
        }

    .green {
        color: green;
    }

        .green + span {
            color: green;
        }
</style>

<div>
    <span class="degraded">red colored text</span>
    <span>black/no color text </span>
</div>

<div>
    <span class="green">green colored text</span>
    <span>black/no color text </span>
</div>

Answer 3

使用相邻的兄弟组合器。 来自MDN 文档：

相邻的兄弟组合符 ( + ) 分隔两个选择器，并且仅当它紧跟在第一个元素之后，并且它们都是同一个父元素的子元素时才匹配第二个元素。

为了证明即使涉及几种不同的颜色和类别也能正常工作，我将.unkown定义为具有blue 。

运行下面的代码片段，看看这是否满足您的需求：

 .degraded, .degraded + span { color: red; }.unkown, .unkown + span { color: blue; }

 <div> <span class="degraded"> red colored text </span> <span> black/no color text </span> <span class="unkown"> red colored text </span> <span> black/no color text </span> </div>