如何为自动生成代码中的div设置斑马纹样式？

首先得明确：你当前的选择器没起作用，核心原因是选错了元素层级——你的.container直接子元素是<li>，不是<div>，所以.container div:nth-of-type(odd)这类选择器根本找不到你想要的目标元素。另外自动生成的HTML里<ul>直接嵌套<div>的结构其实不符合HTML规范（ul的直接子元素必须是li），不过既然你没法修改结构，咱们就基于现有结构调整CSS来实现效果。

正确的CSS写法 #

要实现斑马纹，你需要把选择器定位到<li>层级，再选中里面的.item（或者.detail）元素：

.container { 
  width: 200px; 
  margin: 0 auto; 
} 
.item { 
  line-height: 25pt; 
  border: solid 1px black; 
} 
/* 给奇数位置的li内的item设置红色背景 */
.container li:nth-child(odd) .item {
  background: red;
}
/* 给偶数位置的li内的item设置蓝色背景，完成斑马纹 */
.container li:nth-child(even) .item {
  background: blue;
}

为什么原来的选择器失效？ #

• .container div:nth-of-type(odd)：这个选择器要找的是.container下直接的div子元素，但你的.container里第一个子元素是<li>，没有直接的div节点，所以完全匹配不到任何元素。
• .container div:nth-child(odd)：同理，.container的子元素都是li，没有直接的div，自然也不会生效。

额外提醒 #

虽然咱们绕开结构问题实现了需求，但还是得说一句：<ul>直接包含<div>的结构不符合HTML标准，长期来看可能引发渲染异常或可访问性问题，如果之后有机会优化代码，建议调整结构，让<ul>的直接子元素只有<li>。

内容的提问来源于stack exchange，提问作者Carlos M