：nth-​​child For Nested Elements

时间：2016-12-14 22:51:04

标签： css3 css-selectors

我有以下HTML代码。我想在这段代码中选择奇数或偶数.menu-item ul元素，它们以无限嵌套格式放置。请帮帮我...... 

<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>

2 个答案:

答案 0 :(得分：1)

在这里，你应该对我理解你想要实现的目标感到满意。如果要在li 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>

P.S。我在这里放了一张照片，你可以看看是否符合你的要求！ https://s27.postimg.org/ta75cv36r/image.png

答案 1 :(得分：1)

nth-child不能像你期望的那样工作，它只适用于兄弟元素，因此在每个嵌套级别上它都会重新开始。

您可以为每个设置一个类，即ul-red等等，或者使用脚本进行操作，如下面的示例所示

＆＃13;
＆＃13; 
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] )
  }
})
＆＃13; 
.ul-red {
  background: red;
}
.ul-blue {
  background: blue;
}
.ul-green {
  background: green;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题