CSSの内部スタイルは機能していませんが、インラインが機能しています。どうして？

これはコードです。どんな問題があるのかよく分かりません。だから最初にそこに内部と第2のインラインがあります、それは働いています。インラインCSSは他の画像ではうまく動作しますが、ただ1つ（Capture.png）ではうまく動作しないため、この問題は画像であると思います。CSSの内部スタイルは機能していませんが、インラインが機能しています。どうして？

<!DOCTYPE html> 
<html> 
<style> <!-- this is where I am adding the internal css --> 
body{ 
padding: 0px; 
margin: 0px; 
} 

.cap{     <!-- this is the class for the image --> 
    position: absolute; 
    height:100px; 
    width:200px; 
    left:150px; 
} 
</style> 

<body> 
<div class="cap"><img src="Capture.png"/></div>  
</body> 
</html> 


But this works! 

<div class="cap"><img src="Capture.png" style=" position: absolute; 
    height:100px; 
    width:200px; 
    left:150px;"/></div>

出典

2017-03-19 Ash

の.capは、IMGを収容するdiv要素であるため、Your'eは、CSSで画像を選択しない - その内の画像にCSSを適用するために - あなたはそれをターゲットにする必要があります。画像にクラスを適用するか、（.cap img ...を使用して）包含div内でクラスをターゲティングします。原則として、インラインスタイリングではなく、CSSでスタイリングを適用することが常にベストです。

インラインバージョンが機能する理由は、スタイリングが画像に直接適用されるためです。

インラインスタイルルールを使用するには、次のように.capにimgを追加します。

.cap img{ 
    position: absolute; 
    height:100px; 
    width:200px; 
    left:150px; 
}

出典

2017-03-19 01:15:25 gavgrif

styleがイメージに直接適用されているため、以下のコードは機能します。

<div class="cap"><img src="Capture.png" style=" position: absolute; 
    height:100px; 
    width:200px; 
    left:150px;"/> 
</div>

.capクラスは画像ではなく、画像そのものが含まれていることdivためのものであることに注意してください。あなたが書いたCSSが画像ではなくdivに適用されているため、下のコードの画像は機能しません。

<div class="cap"><img src="Capture.png"/></div>

次のコードは画像を選択します。次のコードを使用してイメージにスタイルを適用する必要があります。

<style> 
.cap img {    <!-- notice the change from ".cap" to ".cap img" --> 
     position: absolute; 
     height:100px; 
     width:200px; 
     left:150px; 
} 
</style>

これがあなたの質問に答えることを願っています。彼らがどのように動作するかをよりよく理解するために、CSSセレクタをさらに読むことをお勧めします。ハッピーコーディング！

出典

2017-03-19 01:28:02

喜喜@Onel Harrison - 私は既にこのソリューションを掲載しています。 – gavgrif

CSSの内部スタイルは機能していませんが、インラインが機能しています。どうして？

答えて

関連する問題