为什么 Firefox 和 chrome 不能接受带有伪元素的 CSS 中的 attr()？

Question

这是我在JSFiddle中尝试的。它在JSFiddle中工作得很好。我可以访问与CSS关联的attr()。但是当我在Firefox和Chrome中尝试时，浏览器还没有准备好接受它。Firefox会立即丢弃这个属性，而Chrome会攻击它并添加一个警告符号。为什么这些浏览器不接受这个attr() ?JSFiddle如何接受它?

$('div').hover(
    function()
    {
        $(this).attr('data-content',':over');
        alert($(this).attr('number'));
    },
    function()
    {
       $(this).attr('data-content',':out');
       alert($(this).attr('number',200+parseInt($(this).attr('number'))));
    }
);
div::after 
{
    content: attr(data-content);
    top: attr(number px);
}

Answer 1

CSS attr()不与任何东西，但content属性，因为这是唯一的属性，它被定义为在CSS2.1，这是attr()的唯一版本，所有浏览器支持的时刻。在CSS3中定义的更广泛的attr()版本还没有被任何浏览器支持——参见我对这个问题的回答。

如果你真的需要根据数据属性值设置top属性或伪元素的任何其他属性，你将不得不采取长路线:你需要使用JavaScript更改文档样式表，例如通过使用addRule()/insertRule()和jQuery的.attr()方法来构建你的CSS规则。你不能直接使用jQuery访问伪元素