将颜色分配给兄弟元素的纯 CSS 方式（无 JS）答案

【问题标题】：Pure CSS way to assign color to a sibling element (no JS)将颜色分配给兄弟元素的纯 CSS 方式（无 JS）
【发布时间】：2020-09-30 06:49:09
【问题描述】：

我在服务器端渲染了生成此 HTML 的代码

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

.degraded 类将元素的颜色设置为红色，但根据设置，css 类也可以是 .available 或 .unknown，这会影响文本的颜色。

是否只使用 css 或 html 数据属性等来为第一个跨度提供与第二个相同的颜色？我事先不知道第二个跨度的颜色

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

【问题讨论】：

标签： html css asp.net sass

【解决方案1】：

是的，你可以使用css的相邻兄弟选择器（目标元素+兄弟元素），它选择被选元素的第一个兄弟元素（在这种情况下，是.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>

【讨论】：

就像@Dhanishtha Ghosh 发布的一样，您可以创建一个具有所需css 样式的类，并将该类应用于您希望具有相同颜色的每个元素
我事先不知道 css 类名，它是动态渲染的，取决于我无法控制的设置

【解决方案2】：

是的，有办法。 Adjacent sibling combinator

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

【讨论】：

我认为没有解决方案。没有previous selector
我可以重新排列它们，然后用 flex 将顺序切换回来，只要我能得到颜色..

【解决方案3】：

使用相邻的兄弟组合。来自MDN docs：

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

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

运行下面的代码 sn-p 看看是否满足你的需要：

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

【讨论】：