易进网站建设推广百度做网站
斑马纹列表
创建一个背景色交替的条纹列表。
使用 :nth-child(odd) 或 :nth-child(even) 伪类选择器,根据元素在一组兄弟元素中的位置,对匹配的元素应用不同的 background-color。
💡 提示：你可以用它对其他 HTML 元素应用不同的样式,如
<div>、<tr>、<p>、<ol>等。
<body><ul><li>项目 01</li><li>项目 02</li><li>项目 03</li><li>项目 04</li><li>项目 05</li></ul><style>li:nth-child(odd) {background-color: #999;}</style>
</body>
这个技巧利用了 CSS 的结构化伪类选择器:
- :nth-child(odd) 选择器匹配其在一组兄弟元素中位置为奇数的元素(第一个、第三个、第五个等)。
- :nth-child(even) 选择器匹配其在一组兄弟元素中位置为偶数的元素(第二个、第四个、第六个等)。
在这个例子中