html - 从列表项格式化第二个 child

Question

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

Demo Fiddle

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元素，然后移动并选择嵌套在ul下的直接li，然后向前移动选择嵌套在 li 下的直接 ul 最后，我们选择嵌套在第二级 ul 下的第二个 li >.

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