input [type ='text'] CSS选择器不适用于默认类型的文本输入？ [英] input[type='text'] CSS selector does not apply to default-type text inputs?

问题描述

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

CSS

  ='text'] 
 {
 background：red; 
} 
  

HTML

 < input name ='t1'type ='text'/> / * is Red * / 
< input name ='t1'/> / *不是红色* / 
  

http://jsfiddle.net/LhnNM/

解决方案

CSS仅使用DOM树，这与渲染器如何决定如何处理具有丢失属性的元素几乎无关。

因此，让CSS反映HTML

 输入：not（[type]），input [type =text] 
 {
 background：red; 
} 
  

或使HTML显式。

 < input name ='t1'type ='text'/> / *不是红色* / 
  

如果没有这样做，区分

  element {... properties ...} 
  pre> 
 
 
和
  element [attr] {... properties ...} 
  
，因为所有属性都将在所有元素上定义。 （例如，表始终具有 border 属性， 0 为默认值。）
 
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']
{
    background:red;
}


HTML

<input name='t1' type='text'/> /* Is Red */
<input name='t1'/> /* Is Not Red */
http://jsfiddle.net/LhnNM/
解决方案
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.

So either let the CSS reflect the HTML
input:not([type]), input[type="text"]
{
background:red;
}
or make the HTML explicit.
<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.)

                        
这篇关于input [type ='text'] CSS选择器不适用于默认类型的文本输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！