为什么我的 CSS 代码没有将指定 div 中的所有文本都变成白色？答案

【问题标题】：Why doesn't my CSS code turn all the text white in the specified div?为什么我的 CSS 代码没有将指定 div 中的所有文本都变成白色？
【发布时间】：2011-07-18 12:35:03
【问题描述】：

我正在潜心研究 Web 开发，而 CSS 很早就让我发挥了最大的作用。我有以下html...

<div class="span-6" id="left-sidebar"> 
    <h4>Left Sidebar</h4> 
    <ul> 
        <li>fruits</li> 
        <li>meats</li> 
    </ul> 
    <h4>This is a header</h4> 
</div>

还有我的 CSS 代码...

#left-sidebar, #right-sidebar {
    background-color: black;
    color: white;
}

但只有文本“fruits”和“meats”以白色文本呈现，其他文本呈现为深灰色。为什么不是所有的文本都呈现为白色？

另外，当我更具体时，我发现我可以使用 CSS 代码解决这个问题...

#left-sidebar, #left-sidebar h4,   {
    background-color: black;
    color: white;
}

为什么我必须更具体？ #left-sidebar 不是表示“使用白色渲染左侧边栏中的所有文本，除非它被更具体的 CSS 语句覆盖”？

我还应该注意，我没有任何其他与左侧边栏 div 相关的 CSS 代码。另外，我正在使用 Blueprint CSS（正如您在“span-6”类中看到的那样），但我不知道这会与任何东西发生冲突。

非常感谢！

【问题讨论】：

以上代码没问题...jsfiddle.net/Mutant_Tractor/kgDwe
你确实有一些“冲突”（覆盖）颜色，因为它在这里工作：jsfiddle.net/5tPm7
很棒的工具，谢谢大家！

标签： html css

【解决方案1】：

Blueprint css 具有标题标签的默认颜色。（见screen.css）

您需要指定：

#left-sidebar h2, #left-sidebar h4, 
#right-sidebar h2, #right-sidebar h4 { color: white; }

【讨论】：

或者“颜色：继承”。那么所有
s 和
s 将具有与其包含元素相同的颜色，无论该颜色是否为白色。
实际上，当我将“h2 {color:white;}”或“h2 {color:inherit}”添加到我的 custom.css 文件时，没有任何变化，它仍然保持在蓝图文件。如果我在蓝图文件之后包含我的外部 custom.css 文件，浏览器不应该接受 h2 的最后读取样式定义（即我的“h2 {color:white}”样式）吗？
@BeachRunnerJoe 最好使用更具体的选择器或 !important，因为样式表顺序可能不是您所期望的。我将编辑我的答案
谢谢，ghoppe，很好的建议！
@BeachRunnerJoe 不客气！顺便说一句，只要 custom.css 在 screen.css 之后加载，任何更改都应该覆盖 custom.css 中的内容。但无论如何我都喜欢使用特定的选择器，这样更容易维护……

【解决方案2】：

基本上，h（标题）定义有时是由浏览器预先设置的。您是否使用 CSS 重置？试试这个http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ - 它基本上摆脱了浏览器默认设置，让跨多个浏览器开发网站变得更加容易。

短期内，尝试单独设置 h2 和 h4 的定义，如下所示：

h2,h4 {
     color: white;
}

或者在你当前的 CSS 中添加一个重要的标签，比如：

#left-sidebar, #right-sidebar {
    background-color: black;
    color: white !important;
}

【讨论】：

【解决方案3】：

您可以使用 Firefox 中的 Firebug 或 Chrome 中的开发人员工具来查看每个元素应用了哪些类。您只需“检查”元素并在左侧窗格中查看应用的 CSS 规则。

【讨论】：

【解决方案4】：

标题标签需要自己的 CSS 类。

h2, h4{
color:white;
}

应该做的伎俩

【讨论】：

s 和

s 将具有与其包含元素相同的颜色，无论该颜色是否为白色。