如何让CSS选择器排除一个元素？

Question

例如，我有一个如下的CSS样式：

    input.validation-passed {border: 1px solid #00CC00; color : #000;}

我使用的JavaScript验证框架将每个输入标签都注入了一个class="validation-passed"。对于像<input type='text' />这样的元素，这是可以接受的，但是对于<input type='button' />，我不希望应用这个类，我应该怎么做？

- Sawyer

Answer 1

.validation-passed:not(input[type="button"]) {color:red;}

- Knu

---

这是CSS3语法，可能并非所有浏览器都完全支持，这一点值得提醒。 - danyim

Answer 2

如果您不需要支持IE6，您可以使用属性选择器：

input[type="text"].validation-passed {border: 1px solid #00CC00; color : #000;}

- SLaks

---

+1 我不知道有没有IE6的CSS方法可以实现这个，所以不必担心。 - Nick Craver

谢谢，但我需要支持IE6！ - Sawyer

Answer 3

我认为你不能这样做。但你可以注入一小段 JavaScript 代码来解析你的输入，并将 text-validation-passed 类添加到所有具有 validation-passed 类的 text 输入框中（如果不需要，也可以从按钮输入框中移除该类）。

- Alsciende