父元素设置样式后子元素无法修改样式的原因及解决方法

核心差异：样式是「继承」还是「直接应用」 #

• 第一版代码里，.Class加在父元素上，子元素的color: blue是从父元素继承来的。而unset对「继承属性」（比如color）的作用是让属性恢复到「继承状态」——也就是继续继承父元素的样式，所以world还是蓝色。
• 第二版代码里，.Class直接加在子元素上，color: blue是直接作用在子元素自身的。unset这时会清除元素自身的这个样式设置，因为没有其他继承来源（父元素没加.Class），所以world就恢复成默认颜色了。

补充说明：null的作用是清除行内样式，让元素回到CSS规则的设置——第一版里hello本来就没有直接的CSS样式，继承父元素的蓝色，所以设null没变化；第二版里hello自己有.Class的蓝色，设null后清除行内样式，回到.Class的蓝色，这是符合预期的。

方法1：用initial替代unset #

initial会把属性重置为CSS定义的初始值，不管是不是继承属性。对于color来说，初始值是浏览器的默认文本颜色（通常是黑色），这样就能摆脱父元素的继承样式：

world.style.color = "initial";

方法2：直接设置具体颜色值 #

如果明确知道要改成什么颜色，直接写具体值最直观：

world.style.color = "black"; // 或者你需要的其他颜色

方法3：用CSS选择器覆盖 #

不用JS，直接在CSS里写更高优先级的规则，利用ID选择器优先级高于类选择器的特性：

.Class #world {
    color: initial; /* 或者具体颜色 */
}

方法4：用revert重置样式 #

revert会让元素样式恢复到浏览器默认的用户代理样式（比如h1默认的加粗黑色），效果和initial类似，但更贴合浏览器原生样式：

world.style.color = "revert";

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