Ich versuche, den Stil einer ungeraden Anzahl von Divs zu ändern, die in einem Div verschachtelt sind. Wenn nth-of-type(odd) in einem anderen Div verschachtelt ist, wirkt sich dies aus irgendeinem Grund auf alle Divs aus. Hier ist mein Code für normale Divs und eine ungerade Anzahl von Divs:
.video-entry-summary { Breite: 214px; Höhe: 210px; Rand links: 10px; schweben: links; Position: relativ; Überlauf versteckt; Rand: 1 Pixel einfarbig schwarz; } .video-entry-summary:nth-of-type(odd) { Breite: 214px; Höhe: 210px; Rand links: 0px; schweben: links; Position: relativ; Überlauf versteckt; Rand: 1 Pixel einfarbig schwarz; Hintergrund: #ccc; } Video 1Video 2Video 3Video 4
Aus irgendeinem Grund funktioniert nth-of-type nicht, wenn es in einem Div verschachtelt ist, aber es funktioniert, wenn es nicht in einem Div verschachtelt ist.
Arbeitsversion, wenn nicht in einem Div verschachtelt:
.video-entry-summary { Breite: 214px; Höhe: 210px; Rand links: 10px; schweben: links; Position: relativ; Überlauf versteckt; Rand: 1 Pixel einfarbig schwarz; } .video-entry-summary:nth-of-type(odd) { Breite: 214px; Höhe: 210px; Rand links: 0px; schweben: links; Position: relativ; Überlauf versteckt; Rand: 1 Pixel einfarbig schwarz; Hintergrund: #ccc; } Video 1Video 2Video 3Video 4
Wie kann ich den Anfangscode mit dem oben genannten identisch machen?
: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; }