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

Question

我正在潜心于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;
}

但只有文本“水果”和“肉类”呈现为白色文本，其他文本呈现为深灰色。为什么不是所有的文本都是白色的呢？

此外，我发现我可以在更具体的时候修复这个问题，使用CSS代码...

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

为什么我要说得更具体？#left-sidebar不是意味着“使用白色呈现左边栏中的所有文本，除非它被更具体的CSS语句覆盖”吗？

我还应该注意到，我没有任何其他与左侧栏div相关的CSS代码。另外，我使用的是Blueprint CSS (正如您在"span-6“类中看到的)，但我不知道这与任何东西有什么冲突。

非常感谢！

Answer 1

Blueprint css具有标题标签的默认颜色。(参见screen.css)

您需要指定：

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

Answer 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;
}

Answer 3

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