问询：CSS中无需硬编码实现属性值动态匹配检查的方法

首先直接给你结论：原生CSS目前没有支持“动态匹配两个元素属性值相等”的选择器语法——你设想的x[attr="*"] ~ y[attr="*"]这种能自动关联同属性值元素的写法，在现有的CSS选择器规范里是不存在的。CSS选择器是静态的，只能针对固定的属性值、文档结构或元素状态（比如:checked）来匹配元素，无法执行“两个元素的属性值是否相等”的比较逻辑。

不过针对你提到的CSS Tab场景，我们有几种取巧的方式来减少代码冗余，甚至接近“自适应”的效果：

方案1：用CSS变量简化硬编码（减少冗余，维护更轻松） #

虽然还是需要为每个tab的ID做对应，但可以让CSS代码更简洁，后续新增tab时的维护成本更低：

/* 为每个选中的单选按钮设置激活的tab ID变量 */
.cssTabs-btn[data-tabs-id="1"]:checked { --active-tab: 1; }
.cssTabs-btn[data-tabs-id="2"]:checked { --active-tab: 2; }
.cssTabs-btn[data-tabs-id="3"]:checked { --active-tab: 3; }

/* 让标签组继承激活状态变量 */
.cssTabs-btn:checked ~ .cssTabs-labelGroup {
  --current-active: var(--active-tab);
}

/* 给每个标签绑定自身的ID变量 */
.cssTabs-btnLabel[data-tabs-id="1"] { --tab-id: 1; }
.cssTabs-btnLabel[data-tabs-id="2"] { --tab-id: 2; }
.cssTabs-btnLabel[data-tabs-id="3"] { --tab-id: 3; }

/* 用CSS计算属性实现“值匹配时生效”的逻辑 */
.cssTabs-btnLabel {
  /* 当tab-id和current-active相等时，透明度为1，否则为0 */
  opacity: calc(1 - abs(var(--tab-id) - var(--current-active, 1)));
  /* 也可以用类似逻辑控制背景色、字体颜色等 */
  background-color: hsl(calc(var(--tab-id) - var(--current-active, 1)) * 180, 80%, 80%);
}

这个方案的核心是用CSS变量传递激活状态，再通过数学计算间接实现“值匹配”的样式控制，比原来的长串选择器简洁很多，新增tab时只需要添加两行CSS代码即可。

方案2：调整HTML结构，用直接兄弟选择器实现自适应 #

如果你的场景允许调整HTML结构，把单选按钮和对应标签放在同一层级，就能完全摆脱硬编码的问题，自适应任何数量的tab：

<form class="cssTabs">
  <div class="cssTabs-tab">
    <input class="cssTabs-btn" name="cssTabs-btn" type="radio" data-tabs-id="1" checked>
    <div class="cssTabs-btnLabel">Button 1</div>
  </div>
  <div class="cssTabs-tab">
    <input class="cssTabs-btn" name="cssTabs-btn" type="radio" data-tabs-id="2">
    <div class="cssTabs-btnLabel">Button 2</div>
  </div>
  <div class="cssTabs-tab">
    <input class="cssTabs-btn" name="cssTabs-btn" type="radio" data-tabs-id="3">
    <div class="cssTabs-btnLabel">Button 3</div>
  </div>

  <div class="cssTabs-contentGroup">
    <div class="cssTabs-content" data-tabs-id="1">Content 1</div>
    <div class="cssTabs-content" data-tabs-id="2">Content 2</div>
    <div class="cssTabs-content" data-tabs-id="3">Content 3</div>
  </div>
</form>

对应的CSS非常简洁：

/* 选中的单选按钮紧邻的标签样式 */
.cssTabs-btn:checked + .cssTabs-btnLabel {
  font-weight: bold;
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}

这种方式是纯CSS方案里最理想的，标签部分完全不需要硬编码每个ID，新增tab时只需要复制HTML结构即可，CSS不需要任何修改。

方案3：利用:has()伪类（仅支持现代浏览器） #

如果你不需要兼容旧浏览器（比如只支持Chrome 101+、Firefox 121+），可以用:has()伪类反向匹配，但本质上还是需要枚举每个ID，并没有解决自适应问题，不过可以让选择器结构更清晰：

.cssTabs-btnLabel[data-tabs-id="1"]:has(~ .cssTabs-btn[data-tabs-id="1"]:checked) {
  font-weight: bold;
  color: #2563eb;
}

这个方案适合需要保留原有HTML结构，但想让CSS代码更易读的场景。

总结 #

目前纯CSS确实没有完美实现“动态匹配同属性值元素”的方案，你可以根据自己的场景选择：

• 能调整HTML结构：优先选方案2，最简洁且完全自适应；
• 不能调整结构：用方案1减少CSS冗余，降低维护成本；
• 追求极致灵活：还是你提到的JS方案最靠谱，但不符合本次纯CSS的需求。

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