CSS3 号码匹配选择器

Question

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

<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">

有几种类型的错误 (error1-error4) 与：短、长、非正则表达式匹配等相关，但这并不重要。重要的是 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 输入重新设置为非错误输入。但首先，data-error 属性仅在发布后添加，其次，这是一个非常丑陋的解决方法。

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

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()伪class用于否定选择器[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"/>

CSS3 号码匹配选择器

CSS3 number matching selector

html

css

attributes

numbers

css-selectors