css根据数据显示不同的样式

1、html

thymeleaf写法：  <td><span class="label-pri" th:data-value="${issue.priority}">[[${issue.priority}]]</span></td>

html写法：   <td><span class="label-pri" data-value="1">100</span></td>

2、css

 

.label-pri[data-value="1"] {
    color: #d50000;
    border-color: #d50000;
}
.label-pri[data-value="2"] {
    color: #ff9800;
    border-color: #ff9800;
}
.label-pri[data-value="3"] {
    color: #2098ee;
    border-color: #2098ee;
}
.label-pri[data-value="4"] {
    color: #009688;
    border-color: #009688;
}

3、说明

th:data-value    ${}  [[${}]]  均是thymeleaf中的写法

css会根据data-value的值来选择相应的样式