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中作为覆盖或显示

Answer 1

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

我会尝试以下方法：

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

Answer 2

请看以下小提琴：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>

Answer 3

更新

查看Fiddle后，CSS中出现了无效字符。这导致它破坏而不适用于此角色后的样式。

删除后，样式正确应用

Fiddle

原始答案

解决此问题的最简单方法是使用类名而不是元素（input）。

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

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

在开始制作CSS时，使用.docDataEditorRow input会很危险。保持单个类名称将使您的CSS从长远来看更易于维护。

CSS未应用于输入元素

3 个答案:

更新

原始答案