不同的按钮使用不同的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;
}
如果这是纯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。