输入[ type = ‘ text’] CSS 选择器不适用于默认类型的文本输入吗？

默认的输入类型是“ text”。我一直假设针对 input[type='text']的 CSS 声明会影响这些输入，即使控件上没有显式声明类型。但是，我刚刚注意到我的默认类型的文本输入没有得到样式。为什么会这样？我该怎么说呢？

input[type='text'] {
background: red;
}
<input name='t1' type='text' /> /* Is Red */
<input name='t1' /> /* Is Not Red */

241346 次浏览
小开

因为，它不是 应该的做到这一点。

input[type=text] { }是一个属性选择器，并且只会选择那些具有匹配属性的元素。

小开
最佳答案

CSS 只使用 DOM 树中的数据，这与呈现程序如何决定如何处理缺少属性的元素无关。

因此，要么让 CSS 反映 HTML

input:not([type]), input[type="text"]
{
background:red;
}

或使 HTML 显式。

<input name='t1' type='text'/> /* Is Not Red */

如果它不这么做，你就永远无法区分

element { ...properties... }

还有

element[attr] { ...properties... }

因为所有属性总是在所有元素上定义。(例如，table始终有一个 border属性，缺省值为 0。)

小开

为了与所有浏览器兼容，您应该始终声明输入类型。

一些浏览器会假设默认类型为“文本”，但这不是一个好的做法。

小开

根据 CSS 规范，浏览器可能使用或不使用关于默认属性的信息; 大多数浏览器不使用默认属性。CSS 2.1规范中的相关子句是 5.8.2 DTD 中的默认属性值。在 CSS3选择器中，它是子句 6.3.4，名称相同。它建议: “选择器应该被设计成无论默认值是否包含在文档树中都能正常工作。”

一般来说，最好是显式地指定诸如 type=text之类的基本属性，而不是将它们作为默认属性。原因是没有简单可靠的方法来引用具有默认 type属性的 input元素。

小开

试试这个

 input[type='text']
{
background:red !important;
}

提交答案