如何在另一个</p> <p>标签下的div类中更改<p>标签的颜色？</p>

Question

我的HTML横幅中有一些文字“了解Google可以为您做些什么”。我希望颜色为#ffffff（白色），但由于某种原因，它从上面的“p”标签中拾取颜色，因此它显示颜色rgb（102,102,102）。我怎么能这样做.box-row p真的显示#ffffff。

请参阅我的jsfiddle：http://jsfiddle.net/huskydawgs/tKn9f/39/

        <div id="wrapper-landing">
    <p>
        Google has released an update to its Text-to-Speech app (TTS) that adds new, high-quality voices—that now take up a couple hundred MB worth of space instead of the old 5-6MB—as well as several new language packs including UK English, Portuguese, and US Spanish.</p>
        <div class="box-row">
        <div class="box-form-body">
                <p>
                    Find out what Google can do for you!</p>
        </div>
        <div class="box-form-button">
            <img alt="Learn More" height="100" src="http://www.robindelillo.fr/img/home/seeMoreButton.png" width="100" />
        </div>
    </div>
    </div>

        #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;
    }

    .box-row {
        width:915px;
        padding:10px;
        border:1px solid #e2e3e4;
        margin-top:50px;
        overflow: hidden;
        background-color:#f66511;
    }
    .box-row p {
        color: #ffffff;
        font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
        font-size: 1.1em;
        line-height: 1.6em;
}

.box-form-body {
    display: inline-block;
    vertical-align: middle;
    width: 75%;
    padding: 0 0 0 2em;
}
    .box-form-button {
        display: inline-block;
        vertical-align: middle;
        width: 15%;
        padding: 0 0 0 2em;
    }
    .box-form-button img {
        vertical-align: bottom;
    }

Answer 1

#wrapper-landing p的{​​{3}}高于.box-row p所以请使用：

#wrapper-landing .box-row p {
    color: #fff;
}

specificity

Answer 2

这很简单，您可以为

设置CSS，如下所示 -

.box-row p {
    color: #ffffff !important;
}

Answer 3

JQuery的

$(document).ready(function() {     
    $(".box-form-body").find('p').css({color: '#fff'});   
});

CSS

    .box-form-body p {
      color: #ffffff !important;
    }

内联样式

<p style="color: #fff;"> Find out what Google can do for you!</p>

希望这有用！