Question

我有一个ul项目，其中还有2个ul个项目。我需要格式化ul中的第二行。

HTML

<ul class="horizontal">
    <li>First List
    <ul class="ul1">
        <li>first</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
    <li>Second List
    <ul>
        <li>first</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
</ul>

CSS

.horizontal >li {
  float: left;
  list-style: none;
  margin: 10px;
}

ul:nth-child(2) {
    color:RED
}

Answer 1

你需要使用下面的选择器..

ul > li > ul > li:nth-of-type(2) {
   color: red;
}

Demo

说明：上面的选择器意味着选择ul元素，而不是移动并选择嵌套在li下的直接ul，而不是向前移动并选择直接ul嵌套在li，最后，我们选择嵌套在第二级li下的第二个ul。

此外，只有li元素可以嵌套在ul内作为直接子元素，您也可以使用nth-child

Answer 2

Mr. Alien是正确的，但相反，使您的CSS非常具体，您是否可以使用ul甚至li上的类。这将使您的CSS在将来更容易管理/覆盖。

重要的是要记住浏览器在阅读CSS并应用它时从右到左工作。

示例

<ul class="horizontal"> <li>First List <ul class="ul1 nested-list"> <li>first</li> <li class="list-item-red">Second</li> <li>Third</li> </ul> </li> <li>Second List <ul class="nested-list"> <li>first</li> <li class="list-item-red">Second</li> <li>Third</li> </ul> </li> </ul> .list-item-red { color: red; }

Answer 3

您的代码无效的原因是您选择的是:nth-child UL，而不是LI。伪选择器（如：nth）可以处理当前的选择器，而不是它的子节点。这对:first-child和:nth-child之类的内容非常困惑，但请记住：something:is，如a:hover

从列表项中格式化第二个子项

3 个答案: