CSS 根据最接近的属性更改颜色 class

Question

这个过程让我抓狂。我正在努力使基础遵守系统看起来更好。我创建了一个用成功和错误系统替换错误 class 的系统。一切正常，除了我在检查字段后显示成功时遇到问题。

HTML

<form data-abide="ajax" id="addNewUser" novalidate="novalidate">
    <div>
        <label class="label" for="fname"><span class="requiredRed">*</span> First Name</label>
        <input type="text" id="fname" name="fname" required="" value="Douglas" aria-invalid="false">
        <div class="fa fa-info-circle errspan fail" style=""><div><p>You must enter a First Name</p></div></div>
        <div class="fa fa-check-circle errspan success"></div>
    </div>
</form>

我一直在尝试寻找是否有一种简单的方法通过 css 来显示基于 'aria-invalid' 属性的成功，例如。

[data-abide] input[aria-invalid='false'] + div.success{ display:block; }

Answer 1

很难理解你的意思。如果某些 JavaScript 处理程序仅触发一次，但之后不再触发，则通常需要重新附加处理程序。例如，如果 ajax 面板中有一个按钮，则每次重新加载面板时都必须将单击事件处理程序添加到该按钮。是这样的问题吗？

Answer 2

我解决了我自己的问题。我错过了一个 + div

[data-abide] input[aria-invalid='false'] + div + div.success{ display:block; }

CSS 根据最接近的属性更改颜色 class

CSS Change color based on attribute of closest class

css

zurb-foundation