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

Posted 2023-03-06

【中文标题】SCSS/CSS 选择器选择所有输入类型

【英文标题】：SCSS/CSS selector to select all input types

【发布时间】：2013-08-07 17:56:18

【问题描述】：

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

不够具体。除了列出所有可能的类型之外，有没有办法做到这一点。

谢谢。

【问题讨论】：

没有类型限定符的input 到底是什么不够具体？所有输入字段都有一个类型；如果缺少，则默认为text。

SASS: Create mixin for input fields 的可能重复项

相关：***.com/questions/17369600/…

【参考方案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);

【讨论】：

你不能像在 CSS 中那样使用 :not() - 请参阅 ***.com/questions/10711730/…

@BoltClock - 你说得对，我的语法是错误的，但我已经更正了语法，你可以链接 nots 像 :not([type=type1]):not([type=type2] ) jsfiddle.net/Pnbb8 在最新的 FF 或 Chrome 中试用

我知道。我在自己对链接问题的回答中说了同样的话。

只是关于带有 nots 链的第二种方法的注释：每个 not 都增加了该选择器的特异性。我遇到了想要覆盖数字输入上的一种样式但没有进行更改的情况，因为 input[type="number"] 特异性小于 input[type]:not(...):not (...).....

@Mike 更明确一点（以防有人试图计算实际特异性但结果不正确），selectors inside the negation pseudo-class add to the specifity, not the negation itself.

【参考方案2】：

这就够了吗？

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


input[type] 
    border: 1px solid blue;

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

See jsFiddle

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

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


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