不同的按钮使用不同的css样式

本文关键字:样式 css 按钮 | 更新日期: 2023-09-27 18:11:03

首先;我知道很多css类型的问题已经结束了,所以,希望我能够拓宽这个问题,以适应其他人。是:

我接到了一个项目,我正在尽我最大的努力增加老板想让我做的功能。但是,当我尝试将一个按钮的样式与其他按钮不同时,这些更改不会"采取"。

css文件工作,因为我能够样式其他东西:

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

按钮:

<input type="submit" value="Print." class="fakeBtn" id="fakeBtn" />
CSS尝试:

.fakeBtn
{
    font-size: 0.8em;
    border: 0px;
    background-color: transparent;
    color: #999;
    cursor: hand;
}
input#fakeBtn
{
    font-size: 0.8em;
    border: 0px;
    background-color: transparent;
    color: #999;
    cursor: hand;
}

正如你所看到的,我已经尝试过使用一个类来改变样式和id方法。但这些方法都不起作用。我几乎没有做过任何mvc工作,这个,已经存在的,项目是我的第一个。这是逻辑错误吗?我做错了什么?

编辑:

这些可以重写吗?这些是我能找到的所有带有"输入"的css片段。一个人怎么知道一个东西是否凌驾于另一个东西之上?

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}
    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }
    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }
    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }
    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }
input.input-validation-error {
    border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
    border: 0 none;
}

不同的按钮使用不同的css样式

如果这是纯html,那么您的代码看起来很好,很明显,您的css根本没有被加载和读取,或者在稍后的某个阶段被覆盖。

您可以尝试应用important(像color: #999 ! important;),只是为了看看是否有任何变化变得可见。如果是这样,您就知道CSS属性在其他地方被覆盖了。

另一方面,我看到Asp。Net和MVC缓存在这里造成了一些问题。您可能需要尝试删除站点并重新发布,以查看是否有任何更改。

更新:

我相信这可能是你的问题:

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

这指定了类型input的样式,所以如果它出现在.fakeBtn { ...}之后,那么该样式将被应用(当然,除非您在某些语句的末尾添加了! important;,在这种情况下,它们只会被其他包含! important;的语句覆盖)。

最好的解决方案可能是在section: input, textarea { ...}中添加特定的类。这样,它通常不会覆盖其他输入字段。

CSS看起来不错。

尝试使用Firebug来验证应用了哪些样式,覆盖了哪些样式。

我怀疑你有其他CSS规则样式按钮和覆盖你的CSS。