我正在尝试更改 div 内的奇数 div 的样式。由于某种原因，当nth-of-type(odd)位于另一个 div 内时，它会影响我的所有 div。这是我的常规 div 和奇数 div 的代码：
.video-entry-summary { width: 214px; height: 210px; margin-left: 10px; float: left; position: relative; overflow: hidden; border: 1px solid black; } .video-entry-summary:nth-of-type(odd) { width: 214px; height: 210px; margin-left: 0px; float: left; position: relative; overflow: hidden; border: 1px solid black; background: #ccc; }
video 1video 2video 3video 4
出于某种原因，nth-of-type在包裹在我的 div 内时不起作用，但在它们未包裹在任何 div 内时却起作用。
未包裹在 div 内时的工作版本：
.video-entry-summary { width: 214px; height: 210px; margin-left: 10px; float: left; position: relative; overflow: hidden; border: 1px solid black; } .video-entry-summary:nth-of-type(odd) { width: 214px; height: 210px; margin-left: 0px; float: left; position: relative; overflow: hidden; border: 1px solid black; background: #ccc; }
video 1video 2video 3video 4
如何使初始代码与上面的代码一样工作？
:nth-of-type()与:nth-child()类似，因为它们必须都来自同一个父级。如果您需要这些包装器div，请在这些包装器上使用:nth-of-type()：div.post:nth-of-type(odd) .video-entry-summary { width:214px; height:210px; margin-left:0px; float:left; position:relative; overflow:hidden; border:1px solid black; background:#ccc; }如果所有同级都是
.post，请使用:nth-child()以避免与:nth-of-type()的真正含义：.post:nth-child(odd) .video-entry-summary { width:214px; height:210px; margin-left:0px; float:left; position:relative; overflow:hidden; border:1px solid black; background:#ccc; }