CSS SNIPPET

  返回

斑马条纹背景的列表  视觉效果

创建一个具有交替背景色的列表,对于区分有跨行内容的兄弟条目很有帮助。

HTML
<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
</ul>
CSS
li:nth-child(odd) {
  background-color: #ddd;
}
效果演示
  • Item 01
  • Item 02
  • Item 03
  • Item 04
  • Item 05
代码说明
  • 使用:nth-child(odd):nth-child(even) 伪类为不同序号的列表子元素应用不同的背景色。
  • 注意你可以对其他HTML元素( 例如div, tr, p, ol等)应用不同的样式。
浏览器支持

100.0%