使用 nth-child 设置 div 样式答案

【问题标题】：Using nth-child to style a div使用 nth-child 设置 div 样式
【发布时间】：2016-09-20 03:01:14
【问题描述】：

我有以下布局，我需要设置第一个和第二个具有 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？

【问题讨论】：

您可以使用奇数和偶数来设置 div 的样式。
也许你应该改用nth-of-type。 stackoverflow.com/questions/3203313/…
您使用正确，可能有一些其他样式可能会影响这一点。请检查它一些工具，如萤火虫。如果它在某些在线页面中，请分享网址，我会检查并让您知道。
css styling using the :nth-child and :not的可能重复

标签： html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

<div class="sixcolx"> 在 .threecolx div 之间，所以你的第二个 .threecolx 不是第二个，而是第三个孩子

Here is jsFiddle

【讨论】：