Question

所以这就是代码。我不确定有什么问题。所以首先有内部和第二个内联，有内联，这是有效的。我认为问题是图像，因为内联css与其他图像一起正常工作，但不能只用一个（Capture.png）。

<!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>

Answer 1

以下代码有效，因为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选择器，以便更好地了解它们的工作原理。快乐的编码！

Answer 2

你不是用css选择图像因为.cap是包含img的div - 将CSS应用到其中的图像 - 你需要将其作为目标。通过将类应用于图像或在包含div中对其进行定位（使用.cap img ...）。作为一项规则 - 最好在CSS中应用样式而不是内联样式。

内联版本的工作原因是因为样式直接应用于图像。

要使用内联样式规则 - 将img添加到.cap中，如下所示。

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

CSS内部样式不起作用，但内联工作正常。为什么？

2 个答案: