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

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;
}

演示

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

此外,只有li元素可以嵌套在里面ul作为直接儿童,你也可以使用nth-child太