CSS半边框颜色设置：时间线蛇形线颜色调整故障排查

我知道多种修改元素边框颜色的方法，但在这个时间线的复杂布局里，没法实现预期效果——我想把带有data-desc="Now"的卡片之后的所有蛇形连接线条改成红色。尝试通过选择器定位后续卡片的::before伪元素调整颜色，但要么改错位置，要么没生效，始终达不到目标。

问题原因 #

原代码中蛇形线条的颜色直接写死在样式里，且通过:nth-child(odd/even)设置了部分边框透明。你尝试的选择器逻辑正确，但受CSS优先级和覆盖顺序影响，颜色修改未正确生效；同时逐个针对奇偶卡片设置颜色的方式不够灵活，后续卡片数量变化时需要重复调整代码。

解决方案 #

用**CSS自定义属性（变量）**统一控制蛇形线条颜色，再通过通用兄弟选择器批量修改Now卡片之后所有卡片的颜色变量，既避免优先级冲突，又提升代码灵活性。

修改后的完整代码 #

CSS代码

*,
*::before,
*::after {
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 1rem/1.4 sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 35vh;
  margin: 0;
}

/* Timeline Container */
.timeline {
  --m: 3rem;
  --w: 20px;
  --r: 3rem;
  display: flex;
  padding: 5rem;
  gap: var(--m);
  width: 90%;
}

/* Card container */
.card {
  position: relative;
  flex: 1 0 auto;
  width: 0px;
  border: var(--b) solid #000;
  padding: 2rem;
  border-radius: 1rem;
  background-color: #f6f6f6;
  /* 定义蛇形线条默认颜色变量 */
  --snake-color: orange;
  min-height: 100%;

  h3 {
    padding: 0 0 1rem 0;
  }

  /* Snake line */
  &::before {
    content: "";
    position: absolute;
    left: calc(var(--m) / -2 - var(--w) / 2);
    width: calc(100% + var(--m) + var(--w));
    height: calc(50% + var(--m) / 2 + var(--w));
    /* 使用变量设置边框颜色 */
    border: var(--w) solid var(--snake-color);
    opacity: 1;
  }

  &:first-child::before {
    clip-path: polygon(var(--r) 0, 100% 0, 100% 100%, var(--r) 100%);
  }

  &:last-child::before {
    clip-path: polygon(0 0, calc(100% - var(--r)) 0, calc(100% - var(--r)) 100%, 0 100%);
  }

  &:nth-child(odd)::before {
    top: calc(var(--m) / -2 - var(--w));
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: transparent;
  }

  &:nth-child(even)::before {
    top: 50%;
    border-radius: 0 0 var(--r) var(--r);
    border-top: transparent;
  }

  /* Pills */
  &::after {
    position: absolute;
    left: 50%;
    content: attr(data-desc);
    background: #1B564B;
    color: #fff;
    font-weight: 900;
    padding: 0.5rem;
    border-radius: var(--r);
    text-align: center;
  }

  &:nth-child(odd)::after {
    top: 0%;
    translate: -50% calc(-50% - var(--m) / 2 - var(--w) / 2);
  }

  &:nth-child(even)::after {
    top: 100%;
    translate: -50% calc(-50% + var(--m) / 2 + var(--w) / 2);
  }
}

/* 选中Now卡片之后的所有卡片，修改蛇形线条颜色变量 */
.card[data-desc="Now"] ~ .card {
  --snake-color: red;
}

HTML代码（无需修改）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="timeline_stylescopy.css">
</head>

<body>
    <div class="timeline">
        <div class="card" data-desc="Summer 2022">
            <div class="info">
                <h3 class="title">Shaping the concept</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card" data-desc="Spring 2023">
            <div class="info">
                <h3 class="title">Sanity check</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card" data-desc="Summer 2023">
            <div class="info">
                <h3 class="title">The leap of faith</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="card" data-desc="Now">
            <div class="info">
                <h3 class="title">Building in progress</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            </div>
        </div>
        <div class="card" data-desc="Spring 2024">
            <div class="info">
                <h3 class="title">It's launch time, baby!</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</body>
</html>

说明 #

1. 新增--snake-color变量统一控制蛇形线条颜色，默认值为橙色
2. 使用通用兄弟选择器.card[data-desc="Now"] ~ .card选中Now卡片之后的所有卡片，将它们的--snake-color变量改为红色
3. 原有的奇偶卡片边框透明设置不受影响，变量会自动应用到对应的边框颜色上

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