属性选择器,其中值等于A或B？

Question

我想知道是否可以在CSS中指定属性等于两个值之一的元素,如下所示:

input[type=text][type=password]

但是这个选择器似乎不起作用(我假设因为指定两次相同的属性无效),有谁知道如何做到这一点？

Answer 1

像这样？http://jsfiddle.net/m242t/

HTML:

<form>
Username: <input type="username" name="Username" value="Username" /><br />
Password: <input type="password" name="Password" value="Password" /><br />
<input type="submit" value="Submit" />
</form>

CSS:

input[type="username"], input[type="password"] {
    color: blue;
}

Answer 2

现在的一个选项是:is，它更干净一些，并且随着选择器列表的增加而保存字符：

<style>
  input:is([type=text], [type=password]) { background-color: red }
</style>

<input type="text"> red
<input type="password"> red
<input type="email"> white

MDN 有一些有用的示例，展示了使用https://developer.mozilla.org/en-US/docs/Web/CSS/:is可以大幅减少选择器数量:is