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 Part看起来像这样

#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 .black {
    color: #000
}

<h3 class="black">...</h3>

Answer 2

尝试使用像这样的子选择器：

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

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

此外，您可以通过使用：last-child psuedo类来完成您尝试执行的操作而无需添加额外的ID和类。

例如：

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

覆盖子div中的CSS样式

2 个答案: