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）与以下内容相关：短，长，不是正则表达式匹配等，但这并不重要。重要的是数据错误=＆＃34; error0＆＃34;意味着没有错误（成功）。

我试图设定此输入的样式。所以我需要一个适用于以下内容的通用选择器：

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]属性选择器，

表示属性名称为attr且其值以“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"/>

CSS3号码匹配选择器

1 个答案: