我已经花了几个小时，但似乎无法解决这个问题。我有一个与此类似的 html 树:
<div class="region">
<div class="area" id="one">
<img src="..." />
<span>...</span>
...
然后我的 css 有:
.region {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 80%;
}
.area {
display: inline-block;
text-align: center;
width: 25%;
}
.area img {
border: 1px solid green;
margin: 0;
}
问题是出于某种原因我似乎无法覆盖区域类中的 img。当我查看 Firebug 时，我只看到应用了全局 img(显示:内联 block )，没有别的。
有趣的是，在 css 中将“img”替换为“span”确实覆盖了它!这怎么会发生？测试了拼写错误等，但我似乎无法弄清楚。
非常感谢任何提示!
最佳答案
我在 Firefox 16.02 以及最新的 Safari 和 Chrome 中看到了同样的问题。但是，向图像添加一个类可以修复它:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.region {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 80%;
}
.area {
display: inline-block;
text-align: center;
width: 25%;
}
.area img {
border: 1px solid green;
margin: 0;
}
.area .place {
border: 1px solid purple;
}
</style>
<title>Hello Dolly!</title>
</head>
<body>
<div class="region">
<div class="area" id="one">
<img src="../Pictures/TheBridge.jpg" class="place">
<span>Span This</span>
</div>
</div>
</body>
</html>
关于css - 为什么我不能覆盖 div 中的 img？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13464227/