在 IE 中的 CSS 伪元素上使用“attr()”答案

【问题标题】：Using "attr()" on CSS pseudo elements in IE在 IE 中的 CSS 伪元素上使用“attr()”
【发布时间】：2011-12-27 16:37:34
【问题描述】：

我在我的H4 元素上使用伪元素:after，并为content 属性提供attr('class')：

<h4 class="category-label">This is a new event</h4>

与

h4:after
{
  content: attr(class);
  display: block;
  padding: 1em;
  background-color: #555;
}

将产生预期的结果——H4 元素的适当标签 with 类，而对于 H4 元素没有任何标签没有 class 属性在大多数浏览器罢工> Safari 5+。

但是在 IE9 中，没有class 属性的H4 元素仍然会创建块伪元素，从而导致没有文本的空白灰色框，这不是预期的行为。在下图中，只有第一个块包含带有 class 属性的 H4，其值为“panel;”第二和第三块中的其他H4 元素没有任何class 属性：

有没有办法确保 IE9 不会为缺少引用内容属性的父元素显示伪内容？不应该呈现没有内容的伪元素...

【问题讨论】：

郑重声明，您不应该引用 class 这个词。正确的语法是attr(class)，而不是attr('class')。
完全正确 - 对不起。我的实际代码没有被引用。
另外，这是预期行为，所以它不是 IE9 错误。它也发生在支持生成内容的其他浏览器中（请参阅this fiddle）。我会解释原因，但我必须写一个完整的答案......
啊 - 我检查了 Chrome 和 FF 上的小提琴，你是对的。与 IE9 的行为相同。似乎我在 iOS 和 Safari 5+ 上进行测试，如果缺少属性，它根本不会呈现内容。这是具有意外行为的 Safari！
我将在这里插入相关规范。不太热衷于添加解释行为但实际上并没有回答您的问题的答案：|在此处查看attr() 的描述：w3.org/TR/CSS2/generate.html#content 然后阅读此部分：w3.org/TR/css3-content/#inserting

【解决方案1】：

随便用

h4[class]:after

因此样式将仅应用于具有已定义类的元素

【讨论】：

效果很好 - 非常感谢。我的替代方案是类似的，比如h4:not():after，但我怀疑这会奏效。
@atwixtor：好吧，您不能使用:not() 来指定具有属性的元素。（您可以使用它来指定没有属性的元素，例如h4:not([class]):after，但当然反过来...）
：即使 attr.与那个 CSS3 选择器一起使用的是 class?我的直觉是，我会针对所有没有类或 ID 的 H4 元素。
@atwixtor: :not() 应该将另一个简单的选择器作为其括号中的参数。另外，由于属性是 DOM 元素的各个组成部分，因此您无法真正选择没有属性的元素。

【解决方案2】：

我怀疑你可以“确保”它而不使用 javascript 来设置它的显示。可能发生的情况是浏览器差异，其中浏览器按您预期的方式忽略 :after 而 IE9 将内容视为空，如 content: ''

【讨论】：