Html 为什么'；第n个类型/n个嵌套元素上的子工作？

我正在尝试更改一个div中的奇数div的样式。由于某种原因，当它位于另一个div中时，type（odd）的第n个

n会影响我的所有div。以下是我的常规div和奇数div代码：


。视频输入摘要{
宽度：214px；
高度：210px；
左边距：10px；
浮动：左；
位置：相对位置；
溢出：隐藏；
边框：1px纯黑；
}
.视频输入摘要：第n个类型（奇数）{
宽度：214px；
高度：210px；
左边距：0px；
浮动：左；
位置：相对位置；
溢出：隐藏；
边框：1px纯黑；
背景：#ccc；
}

视频1
视频2
视频3
视频4
:nth-of-type（）
与
:nth-child（）
类似，它们必须都来自同一父级。如果需要这些包装器
div
s，请在这些包装器上使用
：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
，请改用以避免与以下内容混淆：


。视频输入摘要{
宽度：214px；
高度：210px；
左边距：10px；
浮动：左；
位置：相对位置；
溢出：隐藏；
边框：1px纯黑；
}
.post:n个孩子（奇数）。视频输入摘要{
宽度：214px；
高度：210px；
左边距：0px；
浮动：左；
位置：相对位置；
溢出：隐藏；
边框：1px纯黑；
背景：#ccc；
}

视频1
视频2
视频3
视频4

.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; 
}