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

Question

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

看我的jsfiddle:http://jsfiddle.net/hus​​kydawgs/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具有更高的特异性不是.box-row p这样使用:

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

工作小提琴