[英]Override CSS style in child div
我有幻灯片横幅,我使用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属性,但它没有改变。 请帮忙。
最简单的方法:
#banner .black {
color: #000
}
<h3 class="black">...</h3>
尝试使用像这样的子选择器:
#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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.