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

【问题标题】：Override CSS style behaviour without using !important or inline style sheet在不使用 !important 或内联样式表的情况下覆盖 CSS 样式行为
【发布时间】：2013-09-16 10:03:36
【问题描述】：

我正面临 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 作为文本框，padding:1px, line-height:10px,border:2px #cc0 solid;

我不能使用 !important 或内联样式表

有可能吗？请提出您的解决方案

提前致谢

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

类选择器的特异性低于标签和属性选择器 - 参见Calculating a selector's specificity

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

与往常一样，您的选择器需要更高的特异性，或者如果它相等，则必须在样式表中排在后面（这在浏览器默认样式的情况下自动成为事实）。

关于您想要的样式只有一个词：您将使用什么字体大小将line-height 设置为 10 像素！？无论如何，始终将字体大小和行高设置为无单位值（字体大小的乘数）。

【讨论】：

【解决方案2】：

使某些事物具有更高优先级的一般想法是为其添加更多特定的选择器。

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

【讨论】：

不，一个类没有更高的优先级。
@Pinocchio：类选择器与属性选择器同样具体，而且它们都比类型选择器更具体。
@BoltClock 我的意思是一个类不会覆盖input[type="text"]
@Pinocchio 谢谢。更新了（虽然第一个答案还是对的）
@Itay 好吧，不。由于 BoltClock 所说的类没有更高的优先级，它们是相等的