SCSS/CSS 选择器来选择所有输入类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18085053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SCSS/CSS selector to select all input types
提问by bsr
I have some input type has this scss setting (from the framework)
我有一些输入类型有这个 scss 设置（来自框架）
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
...
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
{
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
}
I like to override/reset all, something similar
我喜欢覆盖/重置所有，类似的东西
textarea,
input[type="*"],
{
@include box-shadow(none);
}
above doesn't work, Also
以上不起作用，还有
textarea,
input,
{
@include box-shadow(none);
}
not specific enough. Is there a way to do this than listing all possible types.
不够具体。除了列出所有可能的类型之外，有没有办法做到这一点。
Thanks.
谢谢。
回答by Louis Ricci
There are a lot of possible input types. If you want textareas and any input that has a type attribute then...
有很多可能的输入类型。如果你想要 textareas 和任何具有 type 属性的输入，那么......
textarea,
input[type] {
...
}
If you want to exclude some input types then use the :notselector.
EDIT EXAMPLE JSFIDDLEhttp://jsfiddle.net/Pnbb8/
如果要排除某些输入类型，请使用:not选择器。
编辑示例 JSFIDDLE http://jsfiddle.net/Pnbb8/
textarea,
input[type]:not([type=search]):not([type=url]):not([type=hidden]) {
}
But like I said there are probably a lot more types you DON'T want than types you DO want, so you can't really avoid the list.
但是就像我说的，你不想要的类型可能比你想要的类型多得多，所以你不能真正避免这个列表。
You could always use a CSS class instead.
您始终可以改用 CSS 类。
.box-shadowed
{
@include box-shadow(none);
}
回答by Nix
Will this suffice?
这足够了吗？
input[type="text"] {
border: 1px red;
}
input[type] {
border: 1px solid blue; }
}
They both have the same specificity, so the last one overrides.
它们都具有相同的特异性，因此最后一个优先。
See jsFiddle: http://jsfiddle.net/TheNix/T2BbG/
参见 jsFiddle：http: //jsfiddle.net/TheNix/T2BbG/
Another solution would be to ommit the element from the first selector. The latter would have higher specificity – however, you should know that in terms of performance, the first one is similar to using an universal selector (as it attempts to match all elements in the DOM, to check for the attribute).
另一种解决方案是省略第一个选择器中的元素。后者具有更高的特异性——但是，您应该知道，就性能而言，第一个类似于使用通用选择器（因为它尝试匹配 DOM 中的所有元素，以检查属性）。
[type="text"] {
border: 1px red;
}
input[type="text"] {
border: 1px solid blue; }
}
