为何JavaScript修改父元素颜色仅对未被操作过的子元素生效

问题根因 #

• 触发问题的核心是CSS的优先级规则：你点击列表项时，直接给<li>元素设置了style.color = 'red'，这属于内联样式，优先级远高于从父元素<ul>继承的样式属性。
• 你给父级ul设置color: black时，只有没有单独设置过内联color样式的<li>会继承父级的颜色，已经被手动添加了红色内联样式的<li>会优先使用自身的内联样式，所以不会生效。

解决方法 #

下面提供几个可行的修改方案：

方案1：清空所有li的内联color样式（适配现有逻辑的最小改动） #

修改clearListColour函数，遍历所有li元素清空自身的内联color属性，让其自动继承父级ul的黑色即可：

function clearListColour(){
    const outerUl = document.getElementById('outerUl');
    outerUl.style.color = 'black';
    // 清除所有li的内联color样式，触发继承
    outerUl.querySelectorAll('li').forEach(item => {
        item.style.color = '';
    });
}

方案2：用类名控制样式（更易维护的规范方案） #

避免直接操作内联样式，改用CSS类控制状态，后续调整样式不需要修改JS逻辑：

1. 先添加CSS样式：

.text-red {
    color: red;
}

2. 修改JS逻辑：

var textColourChanger = function(e){
    // 匹配点击的是li元素才添加样式类
    if(e.target.tagName === 'LI') {
        e.target.classList.add('text-red');
    }
}
function clearListColour(){
    const outerUl = document.getElementById('outerUl');
    outerUl.style.color = 'black';
    // 移除所有li的红色样式类
    outerUl.querySelectorAll('li').forEach(item => {
        item.classList.remove('text-red');
    });
}

方案3：直接覆盖所有li的颜色 #

如果不想修改现有的点击逻辑，也可以在重置时直接给所有li设置黑色：

function clearListColour(){
    document.querySelectorAll('#outerUl li').forEach(item => {
        item.style.color = 'black';
    });
}

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