仅使用css如何选择二级li_Css

仅使用css如何选择二级li

css

仅使用css如何选择二级li,css,Css,我需要选择第二级li并将颜色更改为红色，然后自己选择第三级li并设置为蓝色。有什么帮助吗 <title>Warehouse</title> <style> /* Write your CSS solution here */ ul:nth-of-type(1):first-child{ font-weight: bold; } ul:nth-of-type(1) > ul

我需要选择第二级li并将颜色更改为红色，然后自己选择第三级li并设置为蓝色。有什么帮助吗

    <title>Warehouse</title>
    <style>
      /* Write your CSS solution here */
      ul:nth-of-type(1):first-child{
          font-weight: bold;
      }
      ul:nth-of-type(1) > ul:nth-of-type(1):first-child{
          font-style: italic;
      }

    </style>
  </head>
  <body>
    <ul>
      <li>first level
        <ul>
          <li>second level
            <ul>
              <li>third level</li>
              <li>third level</li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>4th level
            <ul>
              <li>5th level</li>
              <li>5th level</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

我预计这将选择第二级li，但它没有

您可以利用来专门针对具有li>ul>li和li>ul>li>ul>li的子孙：

ul:nth类型1：第一个孩子{ 字体大小：粗体； } ul:nth-of-type1>ul:nth-of-type1:第一个孩子{ 字体：斜体； } li>ul>li{ 颜色：红色； } li>ul>li>ul>li{ 颜色：蓝色； } 一级二级三级三级第四级第五级第五级您忘记了>选择直接子对象

使用子组合器时，它必须如下所示：

ul:nth-of-type(1) > li > ul:nth-of-type(1):first-child {}

但大多数情况下，您可以将此简化为

ul:nth-of-type(1) ul:nth-of-type(1):first-child {}

但在这两种情况下，在增加树的深度时都要小心。。。这些选择器将查找所有级别的所有对

我建议您进一步阅读MDN文档：