为什么我的颜色类没有应用于我的<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下才能让这些颜色工作吗？

这是我的小提琴：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 ...}

如果希望蓝色类覆盖其父类，请添加！对css很重要。

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

Answer 2

您正成为CSS特定性规则的牺牲品。您有另一个css规则，它比覆盖它的.blue类更具体。在本例中，它是您的#wrapper-landing p规则。你必须让它更具体，例如：

#wrapper-landing p.blue {
    color: blue;
}

Answer 3

您的"斯巴鲁森林人"示例不会变成蓝色，因为另一个CSS选择器#wrapper-landing p比.blue更具体（在本例中为101比10）。具有最高特异性的CSS选择器获胜。

请参阅http://learn.shayhowe.com/html-css/getting-to-know-css/#specificity以获得关于如何计算CSS特异性的一些解释。

在您的情况下修复它的一些选项：

1. 用#wrapper-landing p.blue替换.blue
2. 将!important添加到.blue中的颜色定义中
3. 将#wrapper-landing p选择器重写为p

我更喜欢选项3（因为它让你的选择器尽可能小），而不是选项2（！对于像.blue这样的辅助类来说很重要）和最后一个选项1（因为这会产生更多的特殊性）。