如何更改错误消息 CSS 样式（欧芹）

Question

这看起来像是一个衍生问题，但最初的问题从未得到答案，我希望我永远不会为此丢分。所以我使用 parsleyjs 进行验证，顺便说一句，验证很棒，但我不喜欢默认显示错误的方式。

通常，它会创建一个带有一对 li 的 ul 标签，并将错误消息传递给它们，这很好，但问题是我无法设置它的样式li 个标签。我已经尝试了一切。列表如下所示。

<ul class="parsley-errors-list filled" id="parsley-id-5">
   <li class="parsley-required">Please choose a username</li>
</ul>

在我的 css 中，我尝试了 .parsley-error 和许多其他创造性的方法来设置此元素的样式，但 none 有效。我认为这也可能是因为这些元素是在加载时间后添加到 dom 的。如果有人以前解决过这个问题，我将不胜感激你的帮助。提前致谢。

Answer 1

您应该能够使用任意数量的选择器来定位这些 li，无论它们是何时添加到页面的 -

.parsley-errors-list li

.parsley-required

.parsley-errors-list .parsley-required

仅举几例。如果 none 有效，则可能是特异性问题 - 检查浏览器开发工具中呈现的样式可能会帮助您解决问题。

Answer 2

当我检查欧芹时，给出了错误消息的 html 结构。

<ul class="parsley-errors-list filled" id="parsley-id-5">
  <li class="parsley-required">This value is required.</li>
</ul>

我将此 css 代码应用于错误消息。

.parsley-errors-list li.parsley-required {
    background: green;
    padding: 10px;
    color: #fff;
}

检查引用的 url。我希望这能帮到您。 http://codepen.io/anon/pen/ZpmKZZ?editors=0100

How to Change Error Message CSS Style (Parsley)