我有以下布局,我需要对具有类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是第二个孩子)。

10-04 16:10