多子选择器 CSS

【问题标题】：Multiple Child Selector CSS多子选择器 CSS
【发布时间】：2021-10-28 01:24:17
【问题描述】：

如果我有以下代码：

<ul>
    <li>Unordered item</li>
    <li>Unordered item
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
</ul>

如何在不使用 :last-child 的情况下使用 :nth-child 选择器访问 Item 2？

谢谢。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

你可以这样访问

ol li:nth-child(2)

或

ul ol li:nth-child(2)

【讨论】：

相关JS小提琴：jsfiddle.net/katheer_mizal/ws3L6a71/2

【解决方案2】：

使用nth-child(2)

ol li:nth-child(2){
color:red;}

<ul>
    <li>Unordered item</li>
    <li>Unordered item
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
</ul>

【讨论】：