如何让子div文本样式与父div不同？font-size!important不生效求助

问题解决步骤 #

1. 修复选择器拼写错误 #

你当前CSS中的选择器#testPanel-heading是错误的——HTML里对应的元素id是testPanel_heading（下划线连接），而非连字符。这个错误导致你的样式根本没有匹配到目标元素，所以字号设置完全没生效。

2. 针对特定元素设置优先级足够的样式 #

由于你不能直接使用.toggle-title或.mod-content类（避免影响其他区块），需要通过唯一的父id限定来定位目标文本元素，确保样式只作用于当前的#testPanel区块：

修正后的CSS代码：

#testPanel {
    font-size: 20px;
    color: aquamarine;
}

/* 修正拼写错误，并通过父id限定，确保只作用于当前区块的标题容器 */
#testPanel #testPanel_heading {
    font-size: 14px !important;
    color: black !important;
}

/* 若标题文本仍继承父字号，直接定位到h2元素（通过双层id限定，不会影响其他区块） */
#testPanel #testPanel_heading h2 {
    font-size: 14px !important;
}

补充说明 #

你之前觉得颜色样式生效，大概率是浏览器默认样式或页面其他样式恰好让标题显示为黑色，而非错误选择器的作用——修正选择器后，颜色和字号的样式才能真正作用到目标元素。

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