html - Override CSS style behaviour without using !important or inline style sheet

Question

i am facing issue of css override. below css are applied on textbox(with class xdTextBox )

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

}

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

}

I want Result as textbox with padding:1px, line-height:10px, border:2px #cc0 solid;

I can't use !important or inline stylesheet

is it possible ? please suggest your solution

Thanks in advance

score 1 · Accepted Answer

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

HTML：

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

CSS：

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

score 1 · Accepted Answer

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

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

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

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

2 回答 2