在不使用！important或内联样式表的情况下覆盖CSS样式行为

Question

我正面临着css覆盖的问题。下面的css应用于文本框（使用类xdTextBox）

          .xdTextBox   {
            padding:1px;
            line-height:10px; 
            border:2px #cc0 solid;              

}

     input[type="text"]  {
          padding:10px;
          margin:10px;
          line-height:15px; 
          border:none;

}

我想将Result作为带填充的文本框：1px，line-height：10px，border：2px＃cc0 solid;

我无法使用！重要或内联样式表

有可能吗？请建议您的解决方案

提前致谢

Answer 1

更优先考虑事项的一般想法是为其添加更多特定的选择器。

<强> HTML：

<input type="text" class="xdTextBox" name="exmapleInput" />

<强> CSS：

input[type="text"].xdTextBox {
    padding:1px;
    line-height:10px; 
    border:2px #cc0 solid;    
}

进一步阅读：Reviewing CSS style priority

Answer 2

类选择器的特定性低于标记和属性选择器 - 请参阅Calculating a selector's specificity

您仍有几个选项可以覆盖浏览器的默认样式 - 其中一个已经发布了@Itay。

与往常一样，你的选择器需要更高的特性，或者它是相同的，它必须在样式表中出现（在浏览器默认样式的情况下自动成为事实）。

关于您想要的样式只有一个词：您将line-height设置为10px时将使用什么字体大小！？无论如何，总是将font-size和line-height设置为无单位值（font-size的乘数）。