html - CSS3 数字匹配选择器

Question

很抱歉这个问题的主题很奇怪，但我不知道如何更聪明地命名它。我被迫(...)在一个正在构建表单的系统上工作。如果输入填写错误(由用户填写，但我给出了一个有值(value)的示例来说明它):

<input type="email" name="email" value="aaa"> 
<!-- aaa is of course not a valid email -->

发布后，系统向此输入添加新属性:

<input type="email" name="email" value="aaa" data-error="error1"> 

有几种类型的错误(错误1-错误4)与:短、长、不正则表达式匹配等相关，但这并不重要。重要的是 data-error="error0"表示没有错误(成功)。

---

我正在尝试设置此输入的样式。所以我需要一个适用于以下情况的通用选择器:

input[data-error="error1"] {box-shadow: 0 0 5px #f00;}
input[data-error="error2"] {box-shadow: 0 0 5px #f00;}
input[data-error="error3"] {box-shadow: 0 0 5px #f00;}
input[data-error="error4"] {box-shadow: 0 0 5px #f00;}

不适用于:

input[data-error="error0"] {box-shadow: none;}

---

我找到了一个丑陋的解决方案。我将每个输入的样式设置为错误输入，并且仅将 error0 输入重新设置为非错误输入。但首先，数据错误属性仅在发布后添加，其次这是一个非常丑陋的解决方法。

我希望一切都清楚，这是可能的。

---

PS。我可以以某种方式强制系统仅输出数字: data-error="0", data-error="1", ...

如果这有帮助...

Answer 1

您可以使用以下选择器:

input[data-error^="error"]:not([data-error="error0"]) {}

Example Here

它利用[attr^=value]属性选择器，其中

Represents an element with an attribute name of attr and whose value is prefixed by "value". (reference)

:not() 伪类用于否定选择器[data-error="error0"]。

input[data-error^="error"]:not([data-error="error0"]) {
    color: red;
}

<input type="email" name="email" value="aaa" data-error="error0"/> 
<input type="email" name="email" value="aaa" data-error="error1"/>
<input type="email" name="email" value="aaa" data-error="error2"/> 
<input type="email" name="email" value="aaa" data-error="error3"/>