/* :nth-child(odd) 代表选择列表中的奇数项 */ li:nth-child(odd) { background-color: #f1f1f1; } /* :nth-child(even) 代表选择列表中的偶数项 */ li:nth-child(even) { background-color: #ffffff; } /* 也可以直接使用 :nth-of-type() 来选择偶数项 */ li:nth-of-type(even) { background-color: #ffffff; }
上述代码中,大家首先使用:nth-child(odd)来选择列表中的奇数项(即第1项,第3项,第5项……),并将其背景色设为浅灰色。然后大家再使用:nth-child(even)来选择列表中的偶数项(即第2项,第4项,第6项……),并将其背景色设为白色。这样,大家就成功地实现了对列表奇偶行的加色。
除了:nth-child()外,大家还可以使用:nth-of-type()来选择类型为某一标签的元素,并结合even/odd来选择偶数/奇数元素。此时,在列表中,只会选择那些与其他同类型元素顺序相同的元素,比如一个有多个div元素的页面,大家只会选择其中的偶数个div元素。
需要注意的是,如果大家在列表中还有其他类型的元素存在,那么选择器就会按照在DOM树中的先后顺序选择元素。因此,当大家在使用:nth-child()或:nth-of-type()时,应尽量将其包裹在包含选择器的元素内。
总之,单偶选择器为大家的页面布局提供了便利,让大家更加方便地为列表中的元素添加样式。