CSS样式查询if()函数匹配容器自身实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.score {
  font-size: 48px;
  --score: attr(value type(<number>));
  &::before {
      content: attr(value);
  }
  color: if(
    style(--score >= 90): gold;
    style(--score >= 80): green;
    style(--score >= 60): orange;
    else: red;
  );
}

HTML代码：

<data class="score" value="95"></data>
<data class="score" value="85"></data>
<data class="score" value="65"></data>
<data class="score" value="35"></data>