

新闻资讯
技术学院用 nth-child 实现列表隔行变色,核心是利用其公式参数匹配奇数或偶数位置的元素。
给 li:nth-child(odd) 设置背景色,就能让所有奇数位置的列表项变色:
ul li:nth-child(odd) { background-color: #f0f8ff; }
同理,nth-child(even) 专门匹配偶数位置:
ul li:nth-child(even) { background-color: #e6f7ff; }
支持 an+b 写法,比如 3n+1 表示第1、4、7、10…项:
li:nth-child(3n) → 第3、6、9…项(3的倍数)li:nth-child(3n+1) → 第1、4、7…项li:nth-child(3n+2) → 第2、5、8…项如果列表中混有其他标签(如 或标题),nth-child 仍会把它们算进去。此时建议
改用 nth-of-type,它只计算同类型(如只算 li)元素:
ul li:nth-of-type(odd) { background-color: #f0f8ff; }