：n-child对于嵌套元素

我有以下的html代码。我想在这段代码中选择奇数或偶数.menu-item ul元素，它们被放置在无限嵌套格式中。请帮助我...：n-child对于嵌套元素

<nav class='amazing-menu '> 
    <ul id='menu_container'> 
    <li class="parent"> 
     <a href="#" class="link">First</a> 
     <div class="sub-menu"> 
     <ul class="menu-item"> 
      <!-- I want to => background-color: red; --> 
      <li> 
      <a href="" class="link">sub-item1</a> 
      </li> 
      <li class="parent"> 
      <a href="" class="link">sub-item1</a> 
      <div class="sub-menu"> 
       <ul class="menu-item"> 
       <!-- I want to => background-color: blue; --> 
       <li><a href="link">sub-sub-item1</a> 
       </li> 
       <li><a href="link">sub-sub-item2</a> 
       </li> 
       <li><a href="link">sub-sub-item3</a> 
       </li> 
       <li class="parent"><a href="link">sub-sub-item4</a> 
        <div class="sub-menu"> 
        <ul class="menu-item"> 
         <!-- I want to => background-color: green; AND so on ... --> 
         <li><a href="link">sub-sub-sub-item1</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item2</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item3</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item4</a> 
         </li> 
        </ul> 
        </div> 
       </li> 
       <li><a href="link">sub-sub-item2</a> 
       </li> 
       <li><a href="link">sub-sub-item3</a> 
       </li> 
       </ul> 
      </div> 
      </li> 
      <li> 
      <a href="" class="link">sub-item2</a> 
      </li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</nav>

来源

2016-12-14 jamshid

究竟你在看的？ – Geeky

如果你想在menuitem中选择li项目，只需使用.menu-item li：nth-child（奇数）{ color：red; } .menu-item li：n-child（偶数）{ color：green; } – Geeky

正如@Geeky所说，你不清楚你在问什么。你要求偶数或奇数的交替，但在标记中你指出3种颜色。不应该是2种颜色？ – vals

在这里，你应该从我理解你正在努力实现的方向行事。如果工作应该在李的内部完成item-menu使用评论的方法！希望它符合你的目标。

</style> 
</head> 
<body> 

<nav class='amazing-menu '> 
    <ul id='menu_container'> 
    <li class="parent"> 
     <a href="#" class="link">First</a> 
     <div class="sub-menu"> 
     <ul class="menu-item"> 
      <!-- I want to => background-color: red; --> 
      <li> 
      <a href="" class="link">sub-item1</a> 
      </li> 
      <li class="parent"> 
      <a href="" class="link">sub-item1</a> 
      <div class="sub-menu"> 
       <ul class="menu-item"> 
       <!-- I want to => background-color: blue; --> 
       <li><a href="link">sub-sub-item1</a> 
       </li> 
       <li><a href="link">sub-sub-item2</a> 
       </li> 
       <li><a href="link">sub-sub-item3</a> 
       </li> 
       <li class="parent"><a href="link">sub-sub-item4</a> 
        <div class="sub-menu"> 
        <ul class="menu-item"> 
         <!-- I want to => background-color: green; AND so on ... --> 
         <li><a href="link">sub-sub-sub-item1</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item2</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item3</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item4</a> 
         </li> 
        </ul> 
        </div> 
       </li> 
       <li><a href="link">sub-sub-item2</a> 
       </li> 
       <li><a href="link">sub-sub-item3</a> 
       </li> 
       </ul> 
      </div> 
      </li> 
      <li> 
      <a href="" class="link">sub-item2</a> 
      </li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</nav> 

<button onclick="myFunction()">Try it</button> 


<script> 
function myFunction() { 
    var x = document.getElementsByClassName("sub-menu"); 
    for(var i = 0; i<x.length; i++) 
    { 
     if(i%2==0) 
     { 
      document.getElementsByClassName("menu-item")[i].style.backgroundColor = "red"; 
     } 
     else 
     { 
      document.getElementsByClassName("menu-item")[i].style.backgroundColor = "blue"; 
     } 
    } 
} 
</script> 

</body> 
</html>

附：我在这里画一张照片，你可以看到是否符合你的要求！ https://s27.postimg.org/ta75cv36r/image.png

来源

2016-12-14 23:37:14

OP代码中的p标签在哪里？而且，这只在元素共享同一父元素时才有效。 OP想要在嵌套标记中产生奇数。 – Sreekanth

非常好，我的朋友，谢谢。这是非常非常好的 – jamshid

nth-child不像您期望的那样工作，它仅适用于兄弟元素，所以在每个嵌套级别重新开始。

您可以将类分别设定为，即ul-red等等，...还是使用脚本它，如下样品

var bkgcolors = ['ul-red','ul-blue','ul-green'] 
 
window.addEventListener('load', function() { 
 
    var uls = document.querySelectorAll('.amazing-menu .menu-item'); 
 
    for (var i = 0; i < uls.length; i++) { 
 
    uls[i].classList.add(bkgcolors[i]) 
 
    } 
 
})

.ul-red { 
 
    background: red; 
 
} 
 
.ul-blue { 
 
    background: blue; 
 
} 
 
.ul-green { 
 
    background: green; 
 
}

<nav class='amazing-menu '> 
 
    <ul id='menu_container'> 
 
    <li class="parent"> 
 
     <a href="#" class="link">First</a> 
 
     <div class="sub-menu"> 
 
     <ul class="menu-item"> 
 
      <!-- I want to => background-color: red; --> 
 
      <li> 
 
      <a href="" class="link">sub-item1</a> 
 
      </li> 
 
      <li class="parent"> 
 
      <a href="" class="link">sub-item1</a> 
 
      <div class="sub-menu"> 
 
       <ul class="menu-item"> 
 
       <!-- I want to => background-color: blue; --> 
 
       <li><a href="link">sub-sub-item1</a> 
 
       </li> 
 
       <li><a href="link">sub-sub-item2</a> 
 
       </li> 
 
       <li><a href="link">sub-sub-item3</a> 
 
       </li> 
 
       <li class="parent"><a href="link">sub-sub-item4</a> 
 
        <div class="sub-menu"> 
 
        <ul class="menu-item"> 
 
         <!-- I want to => background-color: green; AND so on ... --> 
 
         <li><a href="link">sub-sub-sub-item1</a> 
 
         </li> 
 
         <li><a href="link">sub-sub-sub-item2</a> 
 
         </li> 
 
         <li><a href="link">sub-sub-sub-item3</a> 
 
         </li> 
 
         <li><a href="link">sub-sub-sub-item4</a> 
 
         </li> 
 
        </ul> 
 
        </div> 
 
       </li> 
 
       <li><a href="link">sub-sub-item2</a> 
 
       </li> 
 
       <li><a href="link">sub-sub-item3</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <a href="" class="link">sub-item2</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</nav>

来源

2016-12-15 05:58:40 LGSon

：n-child对于嵌套元素

回答

相关问题