html - HTML和CSS的背景问题

我有这个作为html：

   <div id="subNav" class="lib"><a href="./?c=library&amp;page=1">A Page</a> &nbsp;|&nbsp;
    <a href="./?c=library&amp;page=2">Another Page</a> &nbsp;|&nbsp;
    <a href="./?c=library&amp;page=3">Third Item</a>
   </div>

并将其作为与之关联的CSS：

/*** SubNav styles ***/

#subNav {
    position: relative;
    top: -38px;
    right: -356px;
    /* background: #f39327; */
    width: 380px;
    height: 22px;
    font-size: 18px;
    color: #ffffff;
    font-weight: normal;
    text-align: right;
    vertical-align: middle;
    display: table;
    display: table-cell;
    line-height: 22px;
    /* border: 2px solid #f39327; */
    border-radius: 0 0 0 9px;
    padding-right: 60px;
}

#subNav a:link, #subNav a:visited {
    color: #ffffff;
    text-decoration: none;
}

#subnav.lib {
    background: #f39327;
}

#subNav.lib a:hover, #subNav.lib a:active {
    color: #efefef;
    text-decoration: none;
}

如果我在#subNav中设置了subNav背景色，则可以正常工作。但是，当我尝试在.lib部分中进行设置时，却没有。我不想总是将其设置为一种特定的颜色，因为我希望subNav功能根据类更改颜色，因为站点的其他部分具有其他颜色主题。为什么在类设置中它不起作用，我需要做什么以使其简单地以这种方式工作？

最佳答案

CSS区分大小写。


  CSS在其控制下的所有问题上都不区分大小写；但是，某些事情，例如文档标记语言，是无法控制的。 HTML在大多数方面都不区分大小写，除非涉及某些属性值，例如id和class属性。 XHTML是XML，始终区分大小写。


您必须将#subnav.lib更改为#subNav.lib，以便最终代码如下所示

#subNav.lib {
    background: #f39327;
}