html - 在子 div 中覆盖 CSS 样式

Question

我有幻灯片横幅，我正在使用 CSS 为文本赋予样式。我只是想更改其中一个横幅的样式，但无法覆盖它。 HTML 部分看起来像这样

<div id="banner" class="clearfix">
        <div id="cycle_nav"></div>

        <div class="slide">
            <img src="<?php echo site_url(); ?>image/banner1.jpg" />
            <div class="banner-text-right">
                <h3>#ITExt is here</h3>
                <p> movement.</p>
                <a href="/text" class="red-button">Learn More</a>
            </div>
        </div> -->
        <!--<div class="slide">
            <img src="<?php echo site_url(); ?>image/banner2.jpg" />
            <div id="banner-text3">
                <h3>heading</h3>
                <p>paragraph</p>
                <a href="/take_action" class="red-button">Send Notes</a>
            </div>
        </div>-->
        <div class="slide">
            <img src="<?php echo site_url(); ?>image/banner3.jpg" />
            <div id="banner-text">
                <h3>INTRODUCING New</h3>  // I WANT THIS BLACK
                <p>Help</p>               // I WANT THIS BLACK
                <a href="/link" class="red-button" Now</a>
            </div>
        </div>

        </div>

Css 部分是这样的

#banner h3{
    text-align:left;
    font-family: 'HelveticaNeueLTCom-BdCn';
    font-size:64px;
    color:#fff;
    padding-top:86px;
}


#banner p{
    text-align:left;
    font-family: 'Georgia';
    font-size:24px;
    color:#fff;
    line-height:30px;
}

所以它给出的是白色文本，但我只想为最后一个横幅更改文本，并希望将标题和 prargraph 设为黑色。所以我创建了新的 div id 并添加了 css 属性，但它没有改变。请帮忙。

Answer 1

尝试像这样使用子选择器:

#banner > .slide > #banner-text > h3 {
color:#000;
}

#banner > .slide > #banner-text > p {
color:#000;
}

此外，您可以通过使用 :last-child 伪类来完成您正在尝试做的事情，而无需添加额外的 ID 和类。

例如:

#banner > .slide:last-child > h3 {
    color:#000;
}
#banner > .slide:last-child > p {
    color:#000;
}