基础块网格和第 n 个子选择器答案

【问题标题】：Foundation Block Grid and nth-child selector基础块网格和第 n 个子选择器
【发布时间】：2017-03-23 18:23:05
【问题描述】：

我现在正在使用 FoundationPress 开发 WordPress 主题。我使用 Sass Block Grid 来显示自定义帖子类型的帖子，排成两排。

现在我想给偶数不同的样式（margin-top）。尝试使用 nth-child 选择器执行此操作，但似乎不起作用。所有列都显示为奇数或以 1、3、5 等循环显示。

这是一个常见问题吗？还是块网格不能与这样的选择器一起使用？

在此先感谢 :) 萨宾

【问题讨论】：

你能说明你使用什么类型的选择器吗？看这个例子：w3schools.com/cssref/…
@NadezhdaSerafimova 我正在使用 Foundation Block Grid 和 :nth-child 选择器。当放入（奇数）时，所有列都获得了该样式，（偶数）没有一个列获得样式。由于格式的原因，代码位于新答案的下方。

标签： css wordpress css-selectors zurb-foundation

【解决方案1】：

似乎我找到了解决方案：我使用了 :nth-of-type(2n) 而不是 :nth-child(2) 并且它起作用了，然后它点击了 :D 我把孩子的东西误认为是使用它在 li 上，我应该在 ul 上使用它。

哦，伙计，今天工作太多了。我的坏...

无论如何，非常感谢您的时间:)

HTML：

<ul>
  <li>
    <a href="#linktopost">
      <span class="imgborder"><img src="#linktoimage" alt=""></span>
      <span class="projectinfo">
        <p class="skills">Skillset 1</p>
        <h3>Project 1</h3></span>
    </a>
  </li>

  <li>
    <a href="#linktopost">
      <span class="imgborder"><img src="#linktoimage" alt=""></span>
      <span class="projectinfo">
        <p class="skills">Skillset 2</p>
        <h3>Project 2</h3></span>
    </a>
  </li>

  <li>
    <a href="#linktopost">
      <span class="imgborder"><img src="#linktoimage" alt=""></span>
      <span class="projectinfo">
        <p class="skills">Skillset 3</p>
        <h3>Project 3</h3></span>
    </a>
  </li>

  <li>
    <a href="#linktopost">
      <span class="imgborder"><img src="#linktoimage" alt=""></span>
      <span class="projectinfo">
        <p class="skills">Skillset 4</p>
        <h3>Project 4</h3></span>
    </a>
  </li>
</ul>

CSS：

ul{
    margin-top: 50px;
  }

  ul li{
    list-style-type: none;
    margin-top: 60px;
  }

  ul li:nth-of-type(2n){
    margin-top: 100px;
  }

【讨论】：