Question

我为页面上带有文本类型的所有输入定义了CSS样式。我在页面的一部分上使用Spectrum Color Chooser，并使用

在页面上实现

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

我正在尝试使用以下内容覆盖我已应用于所有类型文本输入的“全局”样式，但它不起作用：

input[type=text]:not([class=basic]), select {
    height:28px;
    border:1px solid #c5d1db;
    padding-left:5px;
    padding-right:5px;
    color:#627686;
    font-size:13px;
    box-shadow:inset 0 4px 5px 0 #ebebeb;
    margin:0;
}

有没有办法覆盖这个？

Answer 1

我真的没有看到这里的问题，这不是CSS特异性的重点吗？ http://jsfiddle.net/calder12/GBH8b/

input[type=text]{
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}

input[type=text].basic{
height:18px;
border:1px solid #000;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
margin:0;
}

Answer 2

发布的CSS代码在支持浏览器（包括一般的现代浏览器，但不包括IE 8的旧版本）中起作用，影响不在类中的字段。

显然，它不会影响类中的字段。但是，用这个更受限制的规则替换适用于所有输入字段的现有规则会产生影响。

Answer 3

只需声明!important，因为它会覆盖主。

input[type=text]:not([class=basic]), select {
    height:28px !important;
    border:1px solid #c5d1db;
    padding-left:5px;
    padding-right:5px;
    color:#627686;
    font-size:13px;
    box-shadow:inset 0 4px 5px 0 #ebebeb;
    margin:0;
}

除具有特定类别的输入外，所有输入的样式

3 个答案: