关于伪类覆盖指定类相的问题

来源：互联网发布：博弈树算法c语言编辑：程序博客网时间：2024/05/16 14:53

工作需要，使按钮在一定条件下改变背景色，边框色等样式。可是发现添加类后，该类样式总是被覆盖。

            <div class="task-t-r posa mr20"><a class="btn btn-m btn-prim-f" ms-class="disableClick:!(isSubmit && !isShowApproval)" href="javascript:void(0);" ms-on-click="submit">课题提交</a></div>

在这里，我想要实现的功能是，当isSubmit&&!isShowApproval条件不满足时，为链接添加disableClick类。

.disableClick{background-color:grey}

可是却发现样式是被覆盖的。

经查找后，发现原来是有以下伪类

.btn-prim-f,.btn-prim-f:link,.btn-prim-f:visited { color:#fff; background-image:none; background-color:#2a8bd7; border-color:#2a8bd7; }.btn-prim-f:hover,.btn-prim-f:active,.btn-prim-f.active { color:#fff; background-color:#1a72c1; border-color:#1a72c1; }

于是原因找到了，这种类似于事件触发的样式，定然会覆盖我所定义的固定样式，为了验证我的想法，做了测试。

将css中伪类去掉，即改为

.btn-prim-f{ color:#fff; background-image:none; background-color:#2a8bd7; border-color:#2a8bd7; }

果然，我所指定的样式被成功显示了出来。
最后，我所采取的更改方法，是另外定义了一系列伪类样式。

.btn-prim-gray-f,.btn-prim-gray-f:link,.btn-prim-gray-f:visited { color:#fff; background-image:none; background-color:#aaa; border-color:#aaa; }.btn-prim-gray-f:hover,.btn-prim-gray-f:active,.btn-prim-gray-f.active { color:#fff; background-color:#aaa; border-color:#aaa; }

然后将链接指定为具有改为类的btn-prim-gray-f类。去掉btn-prim-f类，即改为如下html代码

            <div class="task-t-r posa mr20"><a ms-attr-class="isSubmit && !isShowApproval?'btn btn-m btn-prim-f':'btn btn-m btn-prim-gray-f'" href="javascript:void(0);"  ms-on-click="submit">课题提交</a></div>

0 0