Question

我想为12个标签中的每个标签使用不同的颜色，但是，如果我选择第n个类型的选择器，则它将4个标签分组，每个组中的第一个标签2nd ... 3rd ...第四个标签每个组都被选择为相同。我该如何解决这个问题？我想针对此代码段中的每个标签使用12种不同的动画延迟

我尝试使用nth-child和nth-of-type

https://codepen.io/Kookaburra/pen/YoLwRL?editors=1100

//this is the only bit of CSS used
<style>
    .overlay > a.menu-item:nth-of-type(odd){
        color: blue;
    }
</style>

//<div id="myNav" class="overlay row">
  <a href="#" id="closebtn">&times;</a>

  <div class="overlay-content">
    <a class="menu-item" href="#">About</a>
    <a class="menu-item" href="#">Services</a>
    <a class="menu-item" href="#">Clients</a>
    <a class="menu-item" href="#">Contact</a>
  </div>

  <div class="overlay-content">
    <a class="menu-item" href="#">About</a>
    <a class="menu-item" href="#">Services</a>
    <a class="menu-item" href="#">Clients</a>
    <a class="menu-item" href="#">Contact</a>
  </div>

  <div class="overlay-content">
    <a class="menu-item" href="#">About</a>
    <a class="menu-item" href="#">Services</a>
    <a class="menu-item" href="#">Clients</a>
    <a class="menu-item" href="#">Contact</a>
  </div>

</div>

结果显示每个“重叠内容”标签都相同。

类型选择器问题的第n个

0 个答案: