如何通过h3内<a>标签的ID选中并设置其文本颜色？

要实现通过<a>的ID定位对应的<h3>并设置内部文本颜色，有两种可行思路，取决于你需要的浏览器兼容性：

1. 使用:has()伪类（推荐，现代浏览器支持） #

:has()是CSS的原生特性，能精准选中包含特定子元素的父元素。针对你的HTML结构，直接通过<a>的ID定位它的父<h3>，再设置文本颜色即可：

/* 选中包含ID为SOMEID的直接子<a>的<h3>，设置文本颜色 */
h3:has(> #SOMEID) {
  color: #ff0000; /* 替换成你需要的颜色值 */
}

/* 可选：如果需要保持<a>标签的原有颜色，单独重置它 */
h3:has(> #SOMEID) > #SOMEID {
  color: inherit; /* 或者设置成固定颜色，比如链接默认的#0000ee */
}

这个方法只会影响目标<h3>，不会改动其他<h3>元素。

2. 兼容性降级方案（针对不支持:has()的旧浏览器） #

如果需要兼容旧版浏览器，纯CSS无法通过子元素的ID反向选中父元素，这时候可以用JavaScript辅助实现：

// 找到目标<a>，获取它的父<h3>并设置样式
const targetAnchor = document.getElementById('SOMEID');
if (targetAnchor && targetAnchor.parentElement.tagName === 'H3') {
  targetAnchor.parentElement.style.color = '#ff0000';
  // 可选：重置<a>的颜色
  targetAnchor.style.color = '#0000ee';
}

为什么你之前的选择器无效？ #

CSS无法直接选中文本节点（也就是<h3>里的"TEXT"部分），只能通过选中它的父元素<h3>，利用样式继承来改变文本颜色。你之前尝试的选择器可能是想直接定位文本节点，这在CSS里是无法实现的，必须通过父元素间接设置。

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