html - 为什么我的颜色类别没有应用于我的 <p> 文本？

Question

我试图简化我的样式表，所以如果我想更改我的默认段落文本或我可以添加的任何文本的颜色，例如 (class="blue") 所以我有一个通用颜色列表可以使用在这样的任何文本上:

.dark-grey { color: #232323; }
.med-grey { color: #616161; }
.light-grey { color: #e2e3e4; }
.orange { color: #f66511; }
.light-orange { color: #f66511; }
.blue { color: #2251a4; }
.white { color: #ffffff; }

在我的示例中，为什么我的 Subaru Forester

没有变蓝？

是否必须将所有这些颜色都放在我的 div 下才能使颜色起作用？

这是我的 jsfiddle:http://jsfiddle.net/huskydawgs/1ysq0c3y/7/

这是我的代码:

<p class="orange"><strong>Honda CRV</p>
<p>See full features and specs of the 2014 Honda CR-V SUV at the Official Honda Web site. View seating dimensions, EPA mileage ratings and engineering</p>


<div id="wrapper-landing">
<p class="blue"><strong>Subaru Forester</strong></p>
<p>Fuji Heavy Industries, the company that builds Subaru vehicles, is a master of the economics of scale and, until the arrival this year of the 2013 BRZ sports car, built an entire product line from just two different vehicle platforms, two different power trains and, of course, two different versions of the company's Symmetrical All-Wheel Drive (AWD) system. The new 2014 Subaru Forester, a popular compact crossover SUV, springs from the company's small car platform, which also provides the basis for the Impreza, the WRX and the XV Crosstrek models.</p>

</div>

这是我的 CSS:

body {
    color: #666666;
    font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
    font-size: .8em;
    text-align: left;
    line-height: 1.6em;
    margin: 0;
    padding: 0 0 0 0;
}

.blue { color: #2251a4; }
.orange { color: #f66511; }

#wrapper-landing {
    width: 916px;
    margin: 0 auto 50px auto;
    padding: 0;
}

#wrapper-landing p {
    color: rgb(102, 102, 102);
    font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
    font-size: 1.1em;
    line-height: 1.6em;
}

Answer 1

您正在用父类覆盖颜色。

#wrapper-landing p { color ...}

如果您希望蓝色类覆盖其父级，请将 !important 添加到您的 css。

.blue { color: #2251a4 !important; }