面试题：CSS选择器专家难度面试题

Question

在一个复杂的HTML页面中，有多层嵌套的列表结构。<ul class='main - list'><li><ul class='sub - list'><li><span>内容</span></li></ul></li></ul>。现在需要通过CSS选择器，选中所有奇数层级列表（从.main - list开始算第一层）中的<span>元素，并且要兼容主流浏览器（IE9及以上），请详细说明选择器的构建思路并给出代码实现。

Answer 1

构建思路

1. 首先，利用CSS的 :nth - of - type 伪类选择器来实现选择奇数层级。:nth - of - type(odd) 可以选择奇数位置的元素。
2. 从 .main - list 开始，需要层层向下选择列表中的 <span> 元素。由于是多层嵌套，所以需要使用后代选择器（空格）来表示层级关系。

代码实现

.main - list :nth - of - type(odd) ul :nth - of - type(odd) span {
    /* 这里可以添加对选中的 <span> 元素的样式设置 */
}

上述代码表示从 .main - list 开始，选择奇数层级的 ul 元素下的奇数层级的 ul 元素中的 <span> 元素。注意，如果层级嵌套更多，按照这个规律继续添加 :nth - of - type(odd) ul 即可。