CSS无法弄清楚为什么div消失了

Question

我正在尝试使用2个图像在2个单独的div中为搜索栏制作一些标签，但由于某种原因，它只会显示一个图像。非此即彼。如果我从css中注释掉home-searchbar-school id，教授标签显示，否则只有学校会显示，并且它会显示教授标签应该在哪里。当我想看看谷歌chrome的开发助手中div的位置时，它会在正确的位置显示它们，所以我有点难过。

这是HTML：

<div id="home-searchbar">
    <div id="home-searchbar-tabs">
        <div id="home-searchbar-professor" class="home-searchbar-tab">

        </div>
        <div id="home-searchbar-school" class="home-searchbar-tab">

        </div>
    </div>
    <div id="home-searchbar-container">

    </div>
</div>

和CSS：

#home-searchbar{
    margin-left: 20px;
    float: left;
    height: 115px;
    width: 980px;
    background-color: green;    
}

#home-searchbar-tabs{
    float: left;
    width: 980px;
    height: 32px;
    background-color: red;
}

.home-searchbar-tab{
    background-color: yellow;
    width: 190px;
    height: 32px;
    float: left;
}

#home-searchbar-professor{
    background: url('../img/searchtabs.png') 0 0  no-repeat;
}

#home-searchbar-professor{
    background: url('../img/searchtabsinactive.png') 0 -64px  no-repeat;
}

#home-searchbar-container{
    float: left;
    width: 980px;
    height: 83px;
    background-color: purple;
}

图像是精灵，这些是正常工作所以我只会上传其中一个。 另一个图像只是不同的颜色方案。

另外一个随机的小问题是，在div中有一个类和id的好风格？我还在学习CSS，所以想知道这是否是在div中使用这两者的正确方法/最佳方式？

非常感谢您提供任何帮助或建议！

Answer 1

好的，答案是： “两个背景css使用相同的id，＃home-searchbar-professor”

ty rep，你的css是好的btw

Answer 2

#home-searchbar-professor{
    background: url('../img/searchtabs.png') 0 0  no-repeat;
}

#home-searchbar-professor{
    background: url('../img/searchtabsinactive.png') 0 -64px  no-repeat;
}

两者都称为home-searchbar-professor，因此将其重命名为home-searchbar-school