Question

我的<nav>中有这样的HTML结构。我假设nth-child是要走的路：

   <nav>
    <article class="menu-items">
    <div class="row">
      <ul class="col-6 column">
        <!-- primary nav group one -->
        <li class="primary-nav">Home</li>
        <li class="primary-nav">News</li>
      </ul>
      <ul class="col-6 column right align-right">
        <!-- primary nav group two -->
        <li class="primary-nav">About</li>
        <li class="primary-nav">Contact</li>
      </ul>
    </div>
    <div class="row">
      <!-- primary nav group three -->
      <h1 class="primary-nav">Connect Online</h1>
      <ul class="col-6 column submenu-items">
        <li class="primary-nav"><a href="/">Twitter</a></li>
        <li class="primary-nav"><a href="/">Instagram</a></li>
      </ul>
      <ul class="col-6 column right submenu-items align-right">
        <!-- primary nav group four -->
        <li class="primary-nav"><a href="/">Facebook</a></li>
        <li class="primary-nav"><a href="/">Sq</a></li>
      </ul>
    </div>
  </article>
 </nav>

一些CSS在延迟后触发转换

.primary-nav:nth-child(n) {
    transition-delay: 400ms;
}
.primary-nav:nth-child(2n) {
    transition-delay: 400ms;
}
.primary-nav:nth-child(3n) {
    transition-delay: 700ms;
}
.primary-nav:nth-child(4n) {
    transition-delay: 700ms;
}
.primary-nav:nth-child(5n) {
    transition-delay: 900ms;
}
/* and so on */

MDN：：nth-child（）CSS伪类根据它们在一组兄弟姐妹中的位置匹配一个或多个元素

我不能在这里使用nth-child，因为primary-nav属于不同的群组。到达第一组的末尾时，它将重新开始。说得通。 (odd)或(even)在这里也没有多大用处。

我如何在这里标记每个.primary-nav div？没有JS，我可以这样做吗？

Answer 1

我不确定它是否适合您，但我认为您可以使用Jquery执行此操作。

 var navDivs = $("#your-parent-div-id").find(".primary-nav"); //Gives the list of divs who have the class .primary-nav.

或者，您可以为您的div提供ID并按ID搜索

 for (var i = 0; i < navDivs.length; i++) {
  var div = navDivs[i];
  $(div).css("your-css-property", "your-css-value");
}

最后通过for循环，您可以通过JQuery设置项目的任何属性：

$(".usp-hover").mouseleave( function(){
    $( this ).find( ".usp-block-title" ).stop( true, true ).slideToggle('slow')
    $( this ).find( ".usp-block-hover" ).stop( true, true ).slideToggle('slow')
});

nth-child有哪些替代选择在其他元素中选择div？

1 个答案: