CSS样式查询range范围匹配实例页面

回到相关文章 »

效果：

95 85 65 35

代码：

CSS代码：

@container style(--score >= 90) {
  data {
    color: gold;
  }
}
@container style(--score >= 80) and style(--score < 90) {
  data {
    color: green;
  }
}
@container style(--score >= 60) and style(--score < 80) {
  data {
    color: orange;
  }
}
@container style(--score < 60) {
  data {
    color: red;
  }
}

HTML代码：

<span class="score" style="--score: 95;">
  <data>95</data>
</section>
<span class="score" style="--score: 85;">
  <data>85</data>
</section>
<span class="score" style="--score: 65;">
  <data>65</data>
</section>
<span class="score" style="--score: 35;">
  <data>35</data>
</section>