0

我为页面上所有类型文本的输入定义了 CSS 样式。我在我的部分页面上使用光谱颜色选择器，这是在页面上实现的

<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;
}

有没有办法覆盖这个？

4

3 回答 3

4

我真的看不到这里的问题，这不是 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;
}
于 2012-12-10T18:25:18.427 回答
1

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

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

于 2012-12-10T18:34:32.180 回答
-1

只需声明!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;
}
于 2012-12-10T18:20:42.210 回答