我找不到为什么我的css的一部分不能正确显示

Question

我正在搭建一个网站，并一直在我的CSS中使用“背景色”标签来调试每个块(部分)所在的位置。我的"#mainContent“部分遇到了一点小问题，我不明白为什么背景色(用于调试)没有显示出来。

下面是整个页面代码的JSFIDDLE链接：http://jsfiddle.net/JGAd6/

下面是与该部分相关的代码：

- HTML --

<div id="mainContentWrapper">

    <div id="mainContent">

        <div id="services">

            <div class="serviceNavLink"><a href="#">Marketing Strategy</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw 
                denim fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>
            </div>
            <div class="serviceNavLink"><a href="#">Outsourced Marketing</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw denim 
                fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>
            </div>
            <div class="serviceNavLink"><a href="#">Market Research</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw 
                denim fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>          
            </div>

        </div>

    </div>  

</div>

-- CSS --

#headerWrapper, #topContentWrapper, #mainContentWrapper, #footerWrapper {
width:100%;
clear:both;
}

#headerContent, #topContent, #mainContent, #footerContent {
width:955px;
margin-left: auto;
margin-right: auto;

padding-right: 1em;
padding-left: 1em;
}


#mainContentWrapper {
border:1px solid #000; /* DEBUG ONLY */
background-color: #61e9a1; /* DEBUG ONLY */
}

#mainContent {
font-size: 1.2em;
background-color:ff0000; /* DEBUG ONLY */
line-height: 1.6em;

padding-top: 1em;
padding-bottom: 1em;
}

#services a:hover {
color: #000;
}

#services p {
width:200px;
font-size: 14px;
}

Answer 1

如果您指的是未显示的红色背景，则需要将CSS更改为：

#mainContent {
font-size: 1.2em;
background-color:#ff0000; /* DEBUG ONLY */
line-height: 1.6em;
overflow:auto;
padding-top: 1em;
padding-bottom: 1em;
}

我添加了一个overflow:auto规则，并为您的背景色声明插入了一个缺少的#。

Answer 2

我想你错过了#？

background-color:#ff0000; /* DEBUG ONLY */

http://jsfiddle.net/JGAd6/1/