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?
默认的输入类型是“text”。我一直认为,针对input[type='text']的CSS声明会影响这些输入,即使该类型在控件上没有显式声明。但是,我注意到我的默认类型的文本输入没有获得样式。为什么会这样?我怎么解决这个问题呢?
input[type='text'] {
background: red;
}
<input name='t1' type='text' /> /* Is Red */
<input name='t1' /> /* Is Not Red */
5 个解决方案
#1
86
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, table
always has a border
attribute, with 0
for a default.)
因为所有属性总是在所有元素上定义。(例如,表总是有一个border属性,默认值为0。)
#2
7
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规范中的相关子句是DTDs中的5.8.2默认属性值。在CSS 3选择器中,它是第6.3.4条,具有相同的名称。它建议:“应该设计选择器,以便不管文档树中是否包含默认值,它们都能工作。”
It is generally best to explicitly specify essential attributes such as type=text
instead of defaulting them. The reason is that there is no simple reliable way to refer to the input
elements with defaulted type
attribute.
通常最好显式地指定基本属性,如type=text,而不是默认设置。原因是没有简单可靠的方法引用具有默认类型属性的输入元素。
#3
5
Because, it is not supposed to do that.
因为它不应该这么做。
input[type=text] { }
is an attribute selector, and will only select those element, with the matching attribute.
输入[type=text]{}是一个属性选择器,只选择那些具有匹配属性的元素。
#4
1
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.
有些浏览器会假设默认类型为“text”,但这并不是一个好的实践。
#5
-1
try this
试试这个
input[type='text']
{
background:red !important;
}
#1
86
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, table
always has a border
attribute, with 0
for a default.)
因为所有属性总是在所有元素上定义。(例如,表总是有一个border属性,默认值为0。)
#2
7
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规范中的相关子句是DTDs中的5.8.2默认属性值。在CSS 3选择器中,它是第6.3.4条,具有相同的名称。它建议:“应该设计选择器,以便不管文档树中是否包含默认值,它们都能工作。”
It is generally best to explicitly specify essential attributes such as type=text
instead of defaulting them. The reason is that there is no simple reliable way to refer to the input
elements with defaulted type
attribute.
通常最好显式地指定基本属性,如type=text,而不是默认设置。原因是没有简单可靠的方法引用具有默认类型属性的输入元素。
#3
5
Because, it is not supposed to do that.
因为它不应该这么做。
input[type=text] { }
is an attribute selector, and will only select those element, with the matching attribute.
输入[type=text]{}是一个属性选择器,只选择那些具有匹配属性的元素。
#4
1
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.
有些浏览器会假设默认类型为“text”,但这并不是一个好的实践。
#5
-1
try this
试试这个
input[type='text']
{
background:red !important;
}