为什么我不能在 div 中覆盖 img？答案

【问题标题】：Why can't I override an img inside a div?为什么我不能在 div 中覆盖 img？
【发布时间】：2012-11-19 23:24:33
【问题描述】：

我已经花了几个小时，似乎无法弄清楚这一点。我有一个类似这样的 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。当我查看萤火虫时，我只看到一个全局 img 被应用（显示：内联块），没有别的。

有趣的是，在 css 中将“img”替换为“span”确实会覆盖它！这怎么可能发生？测试了拼写错误等，但我似乎无法弄清楚。

非常感谢任何提示！

【问题讨论】：

奇怪。您有我们可以查看的公共 URL 吗？
是否还有其他 css 选择器比 .area img 具有更高的优先级？
对我来说很好：jsfiddle.net/UxLuJ 我们可能需要更完整的资源才能提供帮助。
不幸的是，我在本地主机中有这个。我将开始禁用其他 div 以查看是否有变化。也许我在这里省略的东西是问题所在。
如果在 CSS 中将“.area img”更改为“#one img”会发生什么？

标签： css html

【解决方案1】：

我在 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>

【讨论】：

谢谢卡尔，很高兴看到我并不孤单。不幸的是，您的修复在我的情况下不起作用（在 Ubuntu 上使用 Chrome 版本 23.0.1271.64），但这足以开始怀疑可能有一些错误导致这种情况发生。会继续寻找。

【解决方案2】：

我发现了导致它的问题，但我不明白为什么会这样。我原来的 css 选择器是这样的：

.area {
  display: inline-block;
  text-align: center;
  width: 25%;
}

.area img {
  border: 1px solid green;
  margin: 0;
}

.area span {
  vertical-align: middle !important;
}

使用这个顺序，代码不起作用，img 被完全忽略，但 span 不是。

现在，如果我将 img 与 span 交换，保留 .area、.area span、.area img 的顺序，那么 span 会被忽略，但 img 不会！

有人知道是什么原因造成的吗？我从来没有遇到过这种问题。

【讨论】：

你能展示一下你在 span 里面有什么吗... span 里面有没有另一个 .. 将整个 HTML 复制到 region 类中
Span 包含一些固定文本：France
@Dan.. 你能用小提琴重现这个问题吗？
问题是它在小提琴中可以正常工作：请参阅jsfiddle.net/UxLuJ/1 以获取最新版本。但由于某种原因，在我的浏览器上它不会覆盖 img。

【解决方案3】：

有人可以在真正的浏览器上试试这个http://jsfiddle.net/UxLuJ/1/，看看是否可以重现问题？

在我的情况下，使用 Chrome 版本 23.0.1271.64 和 Firefox 16.0.2 无法正确解析 img 标签。解决此问题的一种方法是执行以下操作：在 .country 和 .country img 之间添加一个虚拟选择器，如下所示：

.country .foo {}

这样就可以正确识别img标签了。

这似乎与 Carl 报告的错误相同，但我使用的解决方法略有不同。

我会很感激其他人确认这一点。

【讨论】：