input[type='text'] CSS 选择器不适用于默认类型的文本输入?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9603876/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:12:12  来源:igfitidea点击:

input[type='text'] CSS selector does not apply to default-type text inputs?

csscss-selectors

提问by Yarin

The default input type is 'text'. I have always assumed then that CSS declarations targeting input[type='text']would affect those inputs even if the type was not explicitly declared on the control. However, I just noticed that my default-type text inputs do not get the styles. Why is this the case? And how can I address this?

默认输入类型是“文本”。我一直假设 CSS 声明目标input[type='text']会影响这些输入,即使类型没有在控件上显式声明。但是,我只是注意到我的默认类型文本输入没有样式。为什么会这样?我该如何解决这个问题?

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

回答by Mr Lister

The CSS uses only the data in the DOM tree, which has little to do with how the renderer decides what to do with elements with missing attributes.

CSS 只使用 DOM 树中的数据,这与渲染器如何决定如何处理缺少属性的元素几乎没有关系。

So either let the CSS reflect the HTML

所以要么让 CSS 反映 HTML

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

or make the HTML explicit.

或使 HTML 显式。

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

If it didn't do that, you'd never be able to distinguish between

如果不这样做,您将永远无法区分

element { ...properties... }

and

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

because all attributes would always be defined on all elements. (For example, tablealways has a borderattribute, with 0for a default.)

因为所有属性总是在所有元素上定义。(例如,table始终有一个border属性, with0为默认值。)

回答by Jukka K. Korpela

By CSS specifications, browsers may or may not use information about default attributes; mostly the don't. The relevant clause in the CSS 2.1 spec is 5.8.2 Default attribute values in DTDs. In CSS 3 Selectors, it's clause 6.3.4, with the same name. It recommends: “Selectors should be designed so that they work whether or not the default values are included in the document tree.”

根据 CSS 规范,浏览器可能会或可能不会使用有关默认属性的信息;大多数情况下不会。CSS 2.1 规范中的相关条款是5.8.2 DTD 中的默认属性值。在 CSS 3 选择器中,它是同名的子句6.3.4。它建议:“应该设计选择器,以便无论文档树中是否包含默认值,它们都可以工作。”

It is generally best to explicitly specify essential attributes such as type=textinstead of defaulting them. The reason is that there is no simple reliable way to refer to the inputelements with defaulted typeattribute.

通常最好明确指定基本属性,例如type=text而不是默认它们。原因是没有简单可靠的方法来引用input具有默认type属性的元素。

回答by Starx

Because, it is not supposed todo that.

因为,它不应该这样做。

input[type=text] { }is an attribute selector, and will only select those element, with the matching attribute.

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

回答by aguante

To be compliant with all browsers you should always declare the input type.

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

Some browsers will assume default type as 'text', but this isn't a good practice.

一些浏览器会假定默认类型为“文本”,但这不是一个好习惯。

回答by azzeth_alhavizh

try this

尝试这个

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