我有以下布局,我需要对具有类threecolx
的第一和第二个div进行样式设置,但是我需要对它们进行样式设置,而不必向其添加更多类。
的HTML
<div class="threecolx mobile-hidden">
<div class="contact-box">
<span class="promo-text">Family run for over</span>
<span class="promo-date">- 30 Yrs -</span>
</div>
</div>
<div class="sixcolx">
<!-- Desktop Logo -->
<div id="hdr-logo">
<a href="{SELF_URL}" title="{SITE_NAME}"><img src="/img-src/{v2_FOLDER}/theme/logo.png" alt="{SITE_NAME}" class="responsive-img"/></a>
</div>
<!-- // END Desktop Logo -->
</div>
<div class="threecolx">
<div class="contact-box">
<!-- Social Icons -->
<div class="telephone"><a href="/contact.php" title="Contact Us"><span class="fa fa-phone"></span> {v2_TELEPHONE_NUMBER}</a></div>
<div class="email mobile-hidden"><a href="/contact.php" title="Email us"><span class="fa fa-map-marker"></span> Find Us</a></div>
<!-- // Social Icons -->
</div>
</div>
<div class="clearfix"></div>
这是即时通讯使用的样式,应该可以正常工作!
@media screen and (max-width:1200px) {
#header .row {
.threecolx:nth-child(1) .contact-box {
float: right;
}
.threecolx:nth-child(2) .contact-box {
float: left;
}
}
}
目前,仅对类
threecolx
的第一个div进行样式设置,我是否错误地使用了nth-child? 最佳答案
是的,nth-child不会对您为其添加前缀的选择器进行“过滤”。
例如,当您键入.threecolx:nth-child(2)
时,这意味着目标元素应具有类threecolx
,并且应是其父级的第二个子级(而不是父级元素中具有类threecolx的第二个元素!)
在您的示例中,threecolx:nth-child(3)应该与您的目标匹配,因为它是其父级的第三个孩子。 (.sixcolx
是第二个孩子)。