2番目の画像は表示されません

Question

ちょっとした問題があり、解決できません。ここで

はCSSです：

.error { 
    float: left; 
    color: #F00; 
    visibility: hidden; 
    display: inline; 
} 
.validieren:required:invalid + .error { 
    visibility: visible; 
} 

.right { 
    float: left; 
    color: #0F0; 
    visibility: hidden; 
    display: inline; 
} 

.validieren:required:valid + .right { 
    visibility: visible; 
} 

そしてここでは、HTMLコード：

<img src="haken.gif" class="right"> <img src="kreuz.gif" class="error"> 

問題は、第二（この場合はエラーで）画像が表示されないということです。

ありがとうございました。

私はドイツ語です。

Answer 1

はこれを試してみてください：

.validieren:required:invalid ~ .error { 
    visibility: visible; 
} 

あなたは.validieren + .errorと.validieren + .rightの両方を持っています。

.validierenを直ちに.errorと.right両方で（adjacent sibling selector）続くことができません。

general sibling selectorに変更すると機能します。私は、.validieren要素が両方の画像の前に来て（同じ親を共有している）と仮定しています。

Answer 2

errorクラスにはvisibility: hiddenが設定されており、2番目の画像に割り当てられています。あなたはどんな行動を期待していますか？

Answer 3

問題は、errorクラスに画像（または要素）が表示されないようにする属性（具体的にはvisibility: hidden）が含まれていることです。