Question

我试图简化我的样式表，所以如果我想更改我的默认段落文本的颜色或任何我可以添加的文本（class =＆＃34; blue＆＃34;）所以我有要在任何文本上使用的常规颜色列表，如下所示：

.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 ...}

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

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

Answer 2

你正在成为CSS特异性规则的牺牲品。您有另一个css规则，它比仅覆盖它的.blue类更具体。在这种情况下，它是您的#wrapper-landing p规则。你必须使它更具体，例如：

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

Answer 3

你的“Subaru Forester”的例子并没有变成蓝色，因为另一个CSS选择器#wrapper-landing p比.blue更具体（在这种情况下为101 vs 10）。具有最高特异性的CSS选择器获胜。

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

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

将.blue替换为#wrapper-landing p.blue
将!important添加到.blue
将#wrapper-landing p选择器重写为p

我更喜欢选项3（因为它使你的选择器保持尽可能小），而不是选项2（对于像.blue这样的辅助类非常重要）并且作为最后一个选项1（因为这个）创造更多的特异性。）

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

3 个答案: