如何用CSS属性选择器修改选中选项显示颜色？为何给定CSS失效？

嘿，这个问题我太熟悉了！你遇到的核心问题在于select元素的DOM value属性不会随着用户选择新选项而自动更新——CSS的属性选择器是严格基于DOM中实际存在的属性值来匹配的，而不是当前选中的动态值。

具体原因解析 #

当页面加载完成时，你的select元素在DOM中的value属性是初始的"green"（因为第一个option是selected状态），所以select[value="green"]会正确匹配并应用绿色。但当你选中value="red"的选项后：

• JavaScript里可以通过select.value拿到更新后的"red"值，但DOM结构中的value属性并没有被修改，它依然是页面加载时的初始值。
• 由于CSS属性选择器只认DOM上写死的属性值，所以select[value="red"]永远不会匹配，自然不会生效。

可行的解决方案 #

方案1：用TypeScript动态添加类（细化你已知的监听方案）

通过监听change事件，根据当前选中的value给select添加对应的类，再用类选择器写样式：

const customSelect = document.querySelector('.custom-select') as HTMLSelectElement;

// 初始化时添加对应类
customSelect.classList.add(`value-${customSelect.value}`);

// 监听选择变化更新类
customSelect.addEventListener('change', () => {
  // 移除之前的所有value类
  customSelect.classList.remove('value-green', 'value-red');
  // 添加当前选中值对应的类
  customSelect.classList.add(`value-${customSelect.value}`);
});

对应的CSS：

.custom-select.value-green { color: green; }
.custom-select.value-red { color: red; }

方案2：使用CSS :has()伪类（无需JS，现代浏览器支持）

如果你不需要兼容旧浏览器（比如IE），可以用:has()伪类直接让select根据选中的option状态来应用样式：

.custom-select:has(option[value="green"]:checked) {
  color: green;
}

.custom-select:has(option[value="red"]:checked) {
  color: red;
}

:has()的作用是让父元素（select）根据子元素（被选中的option）的状态来匹配样式，完美解决了DOM属性不更新的问题。

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