时间戳

首页 > 解决方案 > 选择第二级 li

html - 选择第二级 li

问题描述

我需要选择第二级 li 并设置为蓝色，然后选择第三级并设置为红色，只有 css。你能帮我吗？

<body>
    <ul>
      <li>Warehouse
        <ul>
          <li>Second Level
            <ul>
              <li>10 cabbages</li>
              <li>5 avocados</li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>third level
            <ul>
              <li>5 pumpkins</li>
              <li>20 carrots</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>

标签： htmlcss

解决方案

要在 css 中选择级别，只需像这样使用 css：

body li > ul > li { /**seconde level**/
        color: blue;
        }
        
        body li > ul > li li { /**third level **/
        color: red;
        }


  body li > ul > li {
    color: blue;
    }
    
    body li > ul > li li {
    color: red;
    }
    <body>
            <ul>
              <li>Warehouse
                <ul>
                  <li>Second Level
                    <ul>
                      <li>10 cabbages</li>
                      <li>5 avocados</li>
                    </ul>
                  </li>
                </ul>
                <ul>
                  <li>third level
                    <ul>
                      <li>5 pumpkins</li>
                      <li>20 carrots</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </body>

推荐阅读