Question

我现在正在使用FoundationPress处理WordPress主题。我使用Sass Block Grid来显示自定义帖子类型的帖子，两个一行。

现在我想给偶数不同的风格（margin-top）。尝试用nth-child选择器做，但它似乎不起作用。所有列都显示为奇数或1,3,5等循环。

这是一个常见问题吗？或者块网格是不是与这样的选择器一起工作？

提前致谢:) 萨宾

Answer 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;
  }

Foundation Block Grid和nth-child选择器

1 个答案: