能否通过背景色选择元素？CSS实现子元素样式修改需求

核心结论 #

不行，直接通过CSS基于元素计算后的背景色来选择元素并修改子元素样式是做不到的，原因如下：

• CSS的属性选择器（比如[background-color]）只匹配HTML标签上写的原生属性，不匹配通过CSS规则设置的样式。比如它只会识别<div background-color="#dee2e6">这种写法，不会识别你用.errors:nth-child(odd)设置的背景色。
• 就算能匹配计算后的样式，也会出现你担心的循环问题：元素被选中后修改了背景色，就不再符合选择条件，又会变回原来的颜色，反复循环，CSS没有处理这种逻辑的机制。
• :has/:is/:where这些新选择器也帮不上忙，它们只能基于DOM结构或其他选择器组合来匹配元素，没法读取计算后的样式值。

你的场景的解决方案 #

既然你是用:nth-child(odd/even)给.errors设置的背景色，直接复用这个选择逻辑来修改子元素样式就行，根本不需要绕背景色这个弯：

.errors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    border-radius: 4px;
    margin: 8px 0px;
}

/* 奇数行容器样式 */
.errors:nth-child(odd) {
    background-color: #dee2e6;
}
/* 奇数行的所有子元素样式 */
.errors:nth-child(odd) p,
.errors:nth-child(odd) .complex-error {
    /* 示例：调整文字颜色，你可以换成需要的背景色或其他样式 */
    color: #212529;
    /* 如果要改子元素背景色：background-color: #xxx; */
}

/* 偶数行容器样式 */
.errors:nth-child(even) {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
}
/* 偶数行的所有子元素样式 */
.errors:nth-child(even) p,
.errors:nth-child(even) .complex-error {
    color: #495057;
}

这种方式逻辑清晰，完全满足你的需求，还没有任何兼容性问题。

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