Question

我试图覆盖父CSS文件中的链接样式，该文件在悬停时强调我的按钮文本。我发现通过附加我想要的样式（text-decoration：none）内联，在元素上执行覆盖但我宁愿不这样做。

关于如何做得更好的任何想法？

<a href="javascript:void(0);" style="text-decoration:none;" class="nco-approve-btn" data-attr-club-id="14">Approve</a>



.nco-approve-btn {

  background: #ad0a0a;
  background-image: -webkit-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -moz-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -ms-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -o-linear-gradient(top, #ad0a0a, #de5252);
  background-image: linear-gradient(to bottom, #ad0a0a, #de5252);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 11px;
  padding: 5px 7px 5px 7px;
  text-decoration: none;
}

.nco-approve-btn:hover {
  background: #8f1313;
  background-image: -webkit-linear-gradient(top, #8f1313, #731717);
  background-image: -moz-linear-gradient(top, #8f1313, #731717);
  background-image: -ms-linear-gradient(top, #8f1313, #731717);
  background-image: -o-linear-gradient(top, #8f1313, #731717);
  background-image: linear-gradient(to bottom, #8f1313, #731717);
  text-decoration: none;
  color: #ffffff;
}


.nco-approve-btn:link {text-decoration: none; color: #ffffff;}
.nco-approve-btn:visited {text-decoration: none; color: #ffffff;}
.nco-approve-btn:active {text-decoration: none; color: #ffffff;}

Answer 1

在属性后放置!important关键字将赋予该属性优先权。

About CSS order of precedence

Answer 2

样式表中可能存在一些更强大的规则，例如

.parent-class .nco-approve-btn{text-decoration:underline;}

检查开发人员工具的规则是什么，然后为没有装饰的链接创建一个更强的（通过添加额外的类）。你可以使用！important，但只有当你确定永远不会需要这个课程来装饰时才这样做。

移动内联将CSS重写为样式表

2 个答案: