伪元素后编写的 CSS 不起作用

Question

我正在开发 Ruby-on-Rails 3.2.1。我遵循 DOM 结构。

更新： 删除了 Gaby 提到的 </img> 标记。问题依然存在。

<div class="frame">
        <img src='SOME_PATH' class="frame-image">
</div>​

并遵循 CSS

.frame { position:relative;border:1px solid #CCC;border-radius:2px;-moz-border-radius:2px; }
.frame:before
{
    position:absolute;
    content:'';
    border:2px solid #F2F2F2;
    height:100%;width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
img.frame-image     /* IT WON't BE APPLIED?! */
{
    min-width:30px;min-height:30px;
    max-width:200px;max-height:200px;
}​

我面临的问题是，应用于img.frame-image 的 CSS 不起作用/未得到应用。我在 Chrome 18 和 FireFox 12 上试过。我在 Chrome 的元素检查器或 FireBug 中看不到样式。它也不会被任何其他 CSS 覆盖。

为了演示，我尝试为此创建jsfiddle。它在那里工作！

但令人惊讶的是，当我在.frame:before CSS 之上编写img.frame-image CSS 时，它起作用了！！

.frame { position:relative;border:1px solid #CCC;border-radius:2px;-moz-border-radius:2px; }
img.frame-image        /* NOW IT WILL BE APPLIED */
{
    min-width:30px;min-height:30px;
    max-width:200px;max-height:200px;
}​
.frame:before
{
    position:absolute;
    content:'';
    border:2px solid #F2F2F2;
    height:100%;width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

知道为什么会这样吗？是框架 (RoR) 相关问题还是 CSS 语义？

Answer 1

首先将</img> 删除为that is invalid..

标签省略

img 元素是一个空元素。 img 元素必须有一个开始标签但不能有一个结束标签。

确保 CSS 已加载（而不是使用缓存版本）。
还要确保没有可能删除/更改您的类的脚本。

（我也希望 CSS 中的注释只是为了堆栈溢出，因为它们是无效的）

---

更新

Firebug 在规则的开头显示了一个奇怪的空格，所以我运行了

var txt = document.styleSheets[0].cssRules[3].cssText;
console.log(0, ':', txt[0],':', txt.charCodeAt(0) );

得到8203 作为charCode ...

这是零宽度空格字符。您需要删除它，因为它被用作选择器的一部分（因此失败）。

---

要实时查看更改，请尝试运行

var txt = document.styleSheets[0].cssRules[3].cssText;
var fixedRule = txt.substring(1);

document.styleSheets[0].deleteRule(3);
document.styleSheets[0].insertRule(fixedRule, 3);

从萤火虫控制台，你会看到它会被修复..（脚本唯一要做的就是删除错误的规则并在删除第一个字符后重新插入） p>

Answer 2

尝试将名称从 frame-image 更改为 frameImage 或其他什么？去掉连字符？