css结构伪类:nth-child 为什么很多示例的前面都会有一个元素名E

如下一段html,

<ul>        <li>1</li>        <li>2</li>        <div>div</div>        <div>div</div>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>        <li>8</li>        <li>9</li>        <li>10</li>    </ul>

用 li:nth-child(3) 去选择了既是li又是第三个子元素的元素，如果第三个子元素不是li，则选择不上了

那为什么不直接用 ul>:nth-child(3) 去选择呢？我试了一下是可以的。
甚至于有时候 .className:nth-child(1) 这样的选择器也是可以的，:nth-child的前面其实不一定是元素选择器。
但是很多示例都很少这样写，是w3标准不推荐吗？还是仅仅是一种习惯？