：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對於嵌套元素

回答

相關問題