html - 使用第 nth-child 样式化一个 div

Question

我有以下布局，我需要设置第一个和第二个 div 的样式，它有 threecolx 类，但我需要在不向它们添加更多类的情况下设置不同的样式。

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？

Answer 1

是的，nth-child 不会“过滤”您为其添加前缀的选择器。

例如，当您键入 .threecolx:nth-child(2) 时，这意味着您的目标元素应该有一个类 threecolx 并且应该是它的父元素(不是父元素中具有类 threecolx 的第二个元素!)

在您的示例中，threecolx:nth-child(3) 应该匹配您的目标，因为它是其父项的第三个子项。 (.sixcolx 是第二个 child )。