在不使用！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;

}

我希望结果为带填充的文本框：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;    
}

进一步阅读： 查看CSS样式优先级

Answer 2

类选择器的特定性低于标记和属性选择器 - 请参阅计算选择器的特异性

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

一如既往，您的选择器需要更高的特定性，或者如果它相等，则必须在样式表中进行（在浏览器默认样式的情况下，这自然是事实）。

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