html - Internet Explorer Css 动态变量内容

Question

请尝试动态生成元素伪类的内容，它可以很好地与(Google Chrome、Firefox、safari)配合使用。

CSS:

.list-rank > li:before{
    content: var(--rank ,'0')
}

HTML

for (var i = 0; i <res.data.rankListUser.length; i++) {
  html +='<li style="--rank:\''+res.data.rankListUser[i].rank+'\'" >';
  html +='name here'
  html +='</li>';
} 
$('#ranking_container').html(html);

Answer 1

IE 不支持这样的 CSS 变量，但您可以使用 data 属性:

div:before { content: attr(data-word); }

<div data-word="Hello">World</div>

这将只与 content 属性一起工作，虽然 - 它不能用于设置颜色等......至少目前不是，这意味着对于 IE 来说它可能是从来没有。根据 MDN，这在 IE 上受支持:https://developer.mozilla.org/en-US/docs/Web/CSS/attr