我正试图在一个网站上定制一些按钮,在这个网站上模板被利用,不能被修改,所以我必须简单地利用一个CSS文件,以风格化的元素,我不能直接修改按钮的创建方式。但是,它们有点复杂,每个按钮都有一个表,它们都在自己的表单元格中。如何将按钮设置为不同的背景色?我只能改变按钮,以允许边界更厚的悬停,但有一个灰色的背景仍然显示,无论我如何试图修改背景的问题。
我的代码:
.bntBgB {
background-color: #122d98;
}
.bntBgB:hover {
background-color: #122d98;
border-width: 0.2rem;
}
.bntBgT {
background: none;
border: solid 1px #384e86;
border-radius: 6px;
color: #fff;
cursor: pointer;
font-family: "Roboto-Light";
font-size: 0.875rem;
font-weight: 300;
letter-spacing: 0.04688rem;
margin: 0;
max-width: 300px;
outline: none;
padding: 0.6em 0 0.75em;
text-decoration: none;
transition: background 0.25s ease;
white-space: nowrap;
margin-right: -10px;
}
.bntBgT:hover {
background: #031136;
border: solid 1px #8fa0ca;
color: #fff;
text-decoration: none;
}
<table id='tbl_secondarycustbtn_set_prim' cellpadding='0' cellspacing='0' border='0' class='uir-button' style='margin-right:6px;cursor:hand;' role='presentation'>
<tr id='tr_secondarycustbtn_set_prim' class='pgBntG'>
<td id='tdleftcap_secondarycustbtn_set_prim'><img src='/images/nav/ns_x.gif' class='bntLT' border='0' height='50%' width='3' alt='' />
<img src='/images/nav/ns_x.gif' class='bntLB' border='0' height='50%' width='3' alt='' /> </td>
<td id='tdbody_secondarycustbtn_set_prim' height='20' valign='top' nowrap class='bntBgB'>
<input type='button' style='' class='rndbuttoninpt bntBgT' value='Set As Primary' id='secondarycustbtn_set_prim' name='secondarycustbtn_set_prim' onclick="nlFireEvent(getButton('custbtn_set_prim'), 'click'); return false;" onmousedown="this.setAttribute('_mousedown','T'); setButtonDown(true, false,
this);" onmouseup="this.setAttribute('_mousedown','F'); setButtonDown(false,
false, this);" onmouseout="if(this.getAttribute('_mousedown')=='T')
setButtonDown(false, false, this);" onmouseover="if(this.getAttribute('_mousedown')=='T') setButtonDown(true, false,
this);"></td>
<td id='tdrightcap_secondarycustbtn_set_prim'>
<img src='/images/nav/ns_x.gif' height='50%' class='bntRT' border='0' width='3' alt=''>
<img src='/images/nav/ns_x.gif' height='50%' class='bntRB' border='0' width='3' alt=''>
</td>
</tr>
</table>
按钮图像链接:https://imgur.com/8khjHQm
最佳答案
有一个很好的机会,他们可能是一个现有的内联式或其他一些风格,具有更高的特异性。打开开发工具并搜索背景色,以查看样式的生成位置。
也尝试设置!导入以查看此操作是否有任何更改(请尝试不要将此选项用作解决方案)
.bntBgB {
background-color: #122d98 !important;
}
如果此选项有效,则是一个“specificity”问题。如果此样式是内联添加的,则必须使用JavaScript来删除这些样式,或者可以使用如上所示的重要选项。如果它是通过另一个样式表添加或内部或外部您的运气!我的朋友的任务是打败“specificity”。
“Specificity”是一个简单的概念。给出了每个css样式选择器组合
标记它们有多重要。你得到的分数越高
您的选择器组合越有可能取代其他竞争样式。遵循MDN
文章的特殊性,我已经标记了一个更深入的观点。