在同一页面上输入具有不同样式的框

Question

输入框我有以下样式

     input[type="text"] { 
        height:16px ; 
        font-size:14 ;
        border-radius: 5px ;    
     }

我想要做的是在大多数输入上都有这种风格，但我想做一类输入，所以我可以添加背景颜色等。我怎么能在syle表中这样做？

Answer 1

使用班级

定义具有不同样式的类

 input[type="text"].different { 
    background-color:red;    
 }

并将其应用于html中的input元素

<input type="text" class="different" />

---

此输入将包含通用规则input[type="text"]的所有属性，然后应用input[type="text"].different类的所有属性。

input[type="text"].different更重要，因此如果属性重叠，.different类中的属性将占优势。

---

阅读https://developer.mozilla.org/en-US/docs/CSS/Class_selectors和https://developer.mozilla.org/en-US/docs/CSS/Specificity

Answer 2

input[type="text"].yellow {
    background-color: yellow;
}