CSS未应用于输入元素

Question

这很奇怪，我看不到问题，并且我有一些使用CSS的经验。

input { 
    border: solid 1px #0066FF; 
} 
.docDataEditorRow input { 
    width: 100px; 
    font-size: 10px; 
} 

HTML：

<div id="docDataEditor"> 
    <form> 
     <div class="column-50"> 
     <div class="docDataEditorRow"> 
      <label for="keyword-Fecha">Fecha</label> 
      <input type="text" value="20131122" id="keyword-Fecha"> 
     </div> 
     <div class="docDataEditorRow"> 
      <label for="keyword-Fecha de Creacion">Fecha de Creacion</label> 
      <input type="text" value="2013-11-22 00:00:00" id="keyword-Fecha de Creacion"> 
     </div>  
     </div> 
<div class="column-50"></div> 
    </form> 
    </div> 

但只有被应用第一input类。

问题：

.docDataEditorRow input { 
    width: 100px; 
    font-size: 10px; 
} 

是不是在Firebug被appliend或显示为重写

Answer 1

更新

说完看了看Fiddle，有一个在CSS无效字符。这是造成它破坏的原因，并不适用于这个角色。

一旦删除样式可以正常

Fiddle

---

原来的答案

适用于解决这个是使用元素（input），而不是一个类名的最简单方法。

<input class="bacon" type="text" value="20131122" id="keyword-Fecha"> 

.bacon { 
    width: 100px; 
    font-size: 10px; 
} 

使用.docDataEditorRow input可能是危险的，你开始做你的CSS具体。长久以来，将事物保存到一个类名将使您的CSS更易于维护。

Answer 2

你可能有一些覆盖它。该规则是否显示在元素检查器中？

我会尝试以下方法：

#docDataEditor .docDataEditorRow input[type="text] { 
    width: 100px; 
    font-size: 10px; 
} 

Answer 3

看看下面的小提琴：http://jsfiddle.net/AJSkh/

您的代码是完全按照你已经在你的问题粘贴它，它正在按预期.. 。

也许你在代码中有其他东西导致它无法工作。

input { 
    border: solid 1px #0066FF; 
} 
.docDataEditorRow input { 
    width: 100px; 
    font-size: 10px; 
} 

<div id="docDataEditor"> 
    <form> 
     <div class="column-50"> 
     <div class="docDataEditorRow"> 
      <label for="keyword-Fecha">Fecha</label> 
      <input type="text" value="20131122" id="keyword-Fecha"> 
     </div> 
     <div class="docDataEditorRow"> 
      <label for="keyword-Fecha de Creacion">Fecha de Creacion</label> 
      <input type="text" value="2013-11-22 00:00:00" id="keyword-Fecha de Creacion"> 
     </div>  
     </div> 
<div class="column-50"></div> 
    </form> 
    </div>