：チェックされた擬似クラスセレクタがCSSで動作していません

CSSを使用して：checked擬似クラスを使用して画像を表示/非表示しようとしています。コンソールにエラーは表示されませんが、チェックボックスをクリックすると画像が表示されません。：チェックされた擬似クラスセレクタがCSSで動作していません

HTMLコード：

<!DOCTYPE> 
<html> 
    <head> 
    <link rel="stylesheet" href="java.css"> 
    </head> 
    <body> 
     <div id="div1"></div> 
     <input type="checkbox" id="chk1"> 
     <img src="IMAG0182.jpg" style="display :none"></img> 

    </body> 
</html>

CSSコード：

input[type=checkbox]:checked + img { 
display : block; 
}

出典

2017-07-16 titlu

で初期状態を設定しますか？ –

インラインスタイルは、常にスタイルシートを上書きします、それはCSS Specificityのルールの一つです。あなたは純粋なCSSの質問をしている場合は、あなたの質問は、JavaScriptとjQueryを使ってタグ付けされたのはなぜ

は、スタイルシート

input[type=checkbox] + img { 
 
    display: none; 
 
} 
 

 

 
input[type=checkbox]:checked + img { 
 
    display: block; 
 
}

<input type="checkbox" id="chk1"> 
 
<img src="IMAG0182.jpg" />

出典

2017-07-16 20:16:14 adeneo

まだ動作していませんが、チェックボックスにチェックを入れてもチェックを外しても画像は常に表示されます – titlu

答えのデモは完璧に機能しているようですので、問題は何ですか？多分あなたは干渉している他のスタイルを持っていますか？ – adeneo

：チェックされた擬似クラスセレクタがCSSで動作していません

答えて

関連する問題