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正在设置样式，我是否正确使用了n-child？

Answer 1

是的，nth-child不会在您带前缀的选择器上“过滤”。

例如，当您键入.threecolx:nth-child(2)时，表示您的目标元素应该具有类threecolx并且应该是其父元素的第二个子元素（而不是父元素中具有类threecolx的第二个元素）！）

在您的示例中，threecolx：nth-child（3）应与您的目标匹配，因为它是其父级的第三个子级。（.sixcolx是第二个孩子）。

Answer 2

<div class="sixcolx"> div之间有.threecolx，因此您的第二个.threecolx不是第二个孩子

Here is jsFiddle

使用nth-child来设置div的样式

2 个答案: