如何为 li 应用奇数、偶数和后两个 cgild答案

【问题标题】：how to apply odd, even and last two cgild for li如何为 li 应用奇数、偶数和后两个 cgild
【发布时间】：2022-01-27 07:32:29
【问题描述】：

我有一个列表，我想为奇数、偶数和最后两个子元素应用颜色。我的结果很糟糕，最后两个孩子影响了奇怪的元素！

          ul {
            list-style-type: none; 
            display: inline-block;
            text-align: center;
            width: 100%;
            margin: 0;
          }
          
          ul:last-child(n-2) li{
          background-color:blue}
          
          li {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            display: inline-block;
          }
        
         li:nth-child(even) {
           background-color: red;
        }
        li:nth-child(odd) {
        background-color: green ;
        }

<!DOCTYPE html>
    <html>
      <head>
        <title>Christmas tree</title>
 
      </head>
      <body>
        <div>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
        </div>
      </body>
    </html>

【问题讨论】：

完全不清楚您现有的代码有什么问题。哪些孩子的颜色不对，他们应该是什么颜色？
它基本上是一棵带有几个红色和蓝色小玩意的绿树吗？哪些？

标签： html css css-selectors

【解决方案1】：

不完全清楚你要做什么，但从你所说的这里是如何处理最后两个

ul {
            list-style-type: none; 
            display: inline-block;
            text-align: center;
            width: 100%;
            margin: 0;
          }
          
          ul:last-child(n-2) li{
          background-color:blue}
          
          li {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            display: inline-block;
          }
        
         li:nth-child(even) {
           background-color: red;
        }
        li:nth-child(odd) {
        background-color: green ;
        }
        
         ul:nth-last-child(2) li{
              background-color:blue}
            
              
           ul:last-child li {
              background-color:blue}

<!DOCTYPE html>
    <html>
      <head>
        <title>Christmas tree</title>
 
      </head>
      <body>
        <div>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
        </div>
      </body>
    </html>

【讨论】：

【解决方案2】：

在每个ul 列表中重新开始计数。
这是你想要的吗？

<!DOCTYPE html>
<html>
  <head>
    <title>Christmas tree</title>
    <style>
      ul {
        list-style-type: none; 
        display: inline-block;
        text-align: center;
        width: 100%;
        margin: 0;
      }
      
      li {
        height: 25px;
        width: 25px;
        border-radius: 50%;
        display: inline-block;
      }
    
     ul:nth-child(even) > li {
       background-color: #cc1212;
    }
    ul:nth-child(odd) > li {
    background-color: #1bcc12 ;
    }

    </style>
  </head>
  <body>
    <div>
      <ul>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
      </ul>
      <ul>
        <li></li>
      </ul>
    </div>
  </body>
</html>

【讨论】：