如何使用:nth-child选择器选中指定HTML结构内的Item 2元素

现有如下HTML结构：

<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对应的<li>元素。

使用如下CSS选择器即可命中目标元素：

ul li:nth-child(2) ol li:nth-child(2) {
  /* 此处可添加自定义样式，示例：将目标元素字体设为红色 */
  color: #f00;
}

选择器逻辑说明 #

• ul li:nth-child(2)：匹配外层<ul>下的第二个直接子<li>，也就是包含嵌套有序列表的那个列表项
• 后续拼接的ol li:nth-child(2)：匹配上述列表项内嵌套的<ol>下的第二个直接子<li>，正好对应Item 2元素

内容的提问来源于stack exchange，提问作者bogdan-cmd