Ich versuche, den Stil einer ungeraden Anzahl von Divs zu ändern, die in einem Div enthalten sind. Aber der Stilselektor nth-of-type(odd) für ungerade Divs wirkt sich auf alle Divs aus, wenn er in einem anderen Div enthalten ist. Hier ist mein Code für ein normales Div 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 funktionieren die nth-of-type-Selektoren nicht, wenn sie in meinem Div enthalten sind, aber sie funktionieren, wenn sie in keinem Div enthalten sind.
Arbeitsversion, wenn nicht in einem div eingeschlossen:
.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; }