如何更改错误消息 CSS 样式 (Parsley)答案

【问题标题】：How to Change Error Message CSS Style (Parsley)如何更改错误消息 CSS 样式 (Parsley)
【发布时间】：2016-10-19 16:45:01
【问题描述】：

这似乎是一个衍生问题，但最初的问题从未得到答案，我希望我永远不会为此松懈。所以我使用 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 和许多其他创造性的方法来设置这个元素的样式，但没有一个有效。我认为这也可能是因为这些元素是在加载时间之后添加到 dom 中的。如果有人以前解决过这个问题，我会很感激你的帮助。提前致谢。

【问题讨论】：

【解决方案1】：

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

.parsley-errors-list li

.parsley-required

.parsley-errors-list .parsley-required

仅举几例。如果这些都不起作用，则可能是特定性问题 - 在浏览器的开发工具中检查呈现的样式可能会对您有所帮助。

【讨论】：

【解决方案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;
}

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

【讨论】：