javaspring，Thymeleaf和CSS如何给错误着色

Question

所以，我有这个：

<td th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td>

它可以工作，它可以在屏幕上打印出想要的信息，但是如何按照我的风格给信息上色。css文件？使用哪一类？我试过使用th:errors，th:if，errors。。。 还尝试命名一个类，例如：<td class="validation-error" th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td>，然后将validation-error放入样式中。css文件，但没有任何效果。。。我知道这是一个愚蠢的问题，但我被它弄糊涂了

我的风格。css文件如下所示：

input[type=text], textarea, select {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
border-radius: 4px;
width: 400px;
}

input[type=text]:focus, textarea:focus, select:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}

input[type=submit] {
background-color: dodgerblue;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}

td[class=validation-error] {
color: red;
}

Answer 1

你记得在类名前面加句号吗

例如：

.validation-error{..}

而不是

validation-error{..}

在CSS类中，需要在前面加一个句号（.）通过标签（#）和ID，只有本地元素可以单独使用其名称进行选择

Answer 2

要么给你td一个类似于

<td class="error-list" th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td>

并将该类添加到css文件中，或在css文件中设置td的样式

td { 
    color: red;
}