Html CSS3号码匹配选择器

对不起，这个问题的主题很奇怪，但我不知道如何给它起个更聪明的名字。我被迫（…）在一个构建表单的系统上工作。如果输入填写错误（由用户填写，但我给出了一个有价值的示例来说明）：

而不为其工作：

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=“0”

，

data error=“1”

---

如果这有帮助…

您可以使用以下选择器：

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

它使用属性选择器，属性选择器

表示属性名为attr且其值以“value”为前缀的元素

：not（）

伪类用于否定选择器

[data error=“error0”]

输入[data error^=“error”]：不是（[data error=“error0”]）{
颜色：红色；
}

WOW。给人印象深刻的我从没想过我可以像+1那样合并它。我必须等11分钟才能接受。谢谢你的帮助，链接更新。希望它能帮助将来的人…记住

：not（）

只接受简单的选择器。也就是说，你自己的解决方案并没有那么糟糕。同样，我之所以评论，是因为我认为它不值得另一个答案，它是可以使用的：（虽然如果可能的错误消息/类型超过10，0-9，那么同样的规则将适用于10，20，30等）。@Jacek：不，不幸的是，在CSS中没有；正则表达式可以在JavaScript（及其库）中实现，但不能仅用HTML/CSS实现。不要费心等待。这种情况发生的可能性很小。

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

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