为什么Webkit不能正确地重新绘制我的网页？
我有一些奇怪的问题。 我不确定我是否搞砸了，或者这甚至可能是webkit中的错误。
我正在做的是使用一些或多或少复杂的CSS技巧（：after和content，兄弟选择器等）和自定义数据属性来指示表单的输入字段是否有效。
我在每个输入字段上都有一个数据属性“data-valid”以及一个包含正则表达式的属性“data-validate”。 在keyup上，我针对输入的值运行正则表达式，并相应地设置data-valid。 然后我在输入旁边有一个小div，使用数据有效的敏感属性选择器进行样式设置。 如果兄弟的输入数据有效属性为真，则背景将显示ok符号，如果设置为false，则将显示失败符号。
因为这可能很难理解，所以我将这个jsfiddle拼接在一起，所以你可以自己看一下。
所有这些在Firefox 6和IE9中完全正常。 但是，在两个基于Webkit的浏览器（Chrome + Safari）中，这都不能100％正确地工作。 尽管数据有效属性正确更改，但样式div不会改变它的外观，直到我输入其他字符或取消聚焦输入字段。 它几乎看起来像Webkit浏览器无法重绘/重新设置特定的div。
我真的不知道发生了什么，我相当自信，这应该像我期望的那样工作。 我希望有人能提出一些见解甚至解释，也许还有一个修复/解决方法。
非常感谢！
这有点复杂，所以我不完全确定，但选择器如下：
input[data-valid="true"]+div.indicator 我认为你遇到了与这个问题中讨论的相同的错误：
CSS属性选择器+后代在Webkit中给出了一个错误？
该问题的所有者@DADU已经提交了一份错误报告，但似乎没有任何结果。
我想出了一个（笨重的）解决方法。 我注意到，如果指针div的相应输入的焦点状态发生变化，它将会更新。 所以我添加了一些input.blur（）。focus（）魔术来自动解除对焦并在每个keyup事件后重新聚焦输入。 这不是很好，但它可以工作，并使Webkit重新绘制兄弟div。