CSS：nth-​​child（even）が正しく動作しない

Question

シンプルなCSSとHTMLコードがあり、なぜ最後の垂直イメージが機能しないのか不思議です。私は国境を意味し、余白は最後の要素に追加されるべきではない。

これはなぜ機能しないのですか？

はhttps://jsfiddle.net/st2Lwrgj/

* {margin: 0; padding: 0;} 
.wrap {width: 250px; border: 1px solid red;overflow:hidden;} 

img { 
    display: block; 
    width: 100%; 
    height: auto; 
    margin-bottom: 10px; 
} 
img.vertical { 
    width: 45%; 
    float: left; 
    margin-right: 10px; 
} 
img.vertical:nth-child(even) { 
    margin-right: 0px; 
    border: 2px solid blue; 
} 

Answer 1

:nth-child(even)が毎秒画像（第二、第四など）に適用されるで見ます。 .verticalクラスなしで水平イメージを挿入すると、この順序が破られます。

以下は回避策の1つですが、ロジックはかなりシンプルです。

1. まず、私たちは、その後、私たちは、次の画像を選択し、img.vertical:nth-child(odd)代わりのevenを使用して順序を元に戻すgeneral sibling selectorを使用:not(.vertical)
2. を使用して.verticalクラスなしで画像を検索img.vertical:nth-child(even)
3. を使用して、すべての第2の画像を選択します。
4. 今度は、奇数と偶数の両方の境界線にimg.verticalを適用したので、ポイント1で選択した画像からスタイリングを削除する必要があります。これはポイント3で設定したセレクタで行いますが、evenodd：img:not(.vertical) ~ img.vertical:nth-child(even)

TLDR;以下の中に、

img.vertical:nth-child(even) { 
    margin-right: 0px; 
    border: 2px solid blue; 
} 

：この部分を変更

img.vertical:nth-child(even), 
img:not(.vertical) ~ img.vertical:nth-child(odd) { 
    margin-right: 0px; 
    border: 2px solid blue; 
} 
img:not(.vertical) ~ img.vertical:nth-child(even) { 
    margin-right: 10px; 
    border: 0; 
} 

あなたは、これがthis fiddleでどのように機能するかを確認することができます。