Question

我有一些输入类型有这个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));
}

我喜欢覆盖/重置所有类似的东西

textarea,
input[type="*"],
{
  @include box-shadow(none);
}

以上不起作用，

textarea,
    input,
    {
      @include box-shadow(none);
    }

不够具体。有没有办法做到这一点，而不是列出所有可能的类型。

感谢。

Answer 1

有很多可能的输入类型。如果你想要textareas和任何具有type属性的输入，那么......

textarea,
input[type] {
    ...
}

如果要排除某些输入类型，请使用:not选择器。 编辑示例JSFIDDLE http://jsfiddle.net/Pnbb8/

textarea,
input[type]:not([type=search]):not([type=url]):not([type=hidden]) {

}

但就像我说的那样，你想要的类型可能比你想要的类型要多得多，所以你无法真正避开这个类别。

您总是可以使用CSS类。

.box-shadowed
{
  @include box-shadow(none);
}

Answer 2

这样就够了吗？

input[type="text"] {
    border: 1px red;
}

input[type] {
    border: 1px solid blue; }
}

它们都具有相同的特异性，因此最后一个覆盖。

参见jsFiddle：http://jsfiddle.net/TheNix/T2BbG/

另一种解决方案是从第一个选择器中省略元素。后者具有更高的特异性 - 但是，您应该知道在性能方面，第一个类似于使用通用选择器（因为它尝试匹配DOM中的所有元素，以检查属性）。

[type="text"] {
    border: 1px red;
}

input[type="text"] {
    border: 1px solid blue; }
}

SCSS / CSS选择器用于选择所有输入类型

2 个答案: