Javascript 如何阻止CSS规则应用于特定元素

我有这样一个CSS规则：

a {
  line-height: 50px;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  color: white;
}

这个HTML：

<a href="/test">test</a>

如何停止仅应用于此元素的CSS规则？

您可以在CSS声明中使用（

.foo

）而不是元素选择器（

a

）

因此，与其这样做，不如：

CSS

HTML

HTML

当您不希望

元素具有这些样式时，只需省略该类或应用可能已声明的其他类即可


内联样式

另一种解决问题但并不真正符合最佳实践（在多个级别上）的方法是使用内联样式

由于您是说不希望应用外部（或嵌入）样式，因此您只希望
a
样式不同。您可以通过以下方式实现您的目标：

保持原始CSS声明不变
更改HTML：

在这种情况下，内联样式将优先于其他样式

请注意，内联样式优先于外部样式和嵌入样式，除非外部和嵌入声明包含
！重要信息
，内联样式不包含
！重要信息
如果选择器与元素匹配，则它与元素匹配

您有三种选择：


更改选择器，使其不匹配
更改元素，使其不匹配
编写另一个CSS规则集，该规则集向下延伸，并使用新值覆盖第一个规则集中您不喜欢的每个属性
谢谢大家的建议，但以下答案对我来说非常有效：

a.none {
  line-height: inherit;
  display: inherit;
  text-decoration: inherit;
  font-size: inherit;
  color: inherit;
}

创建该类，然后将其附加到a标记，如下所示：

<a class="none" href="/test">test</a>



之前有人贴了这个，然后把它删除了，我不知道为什么，但是谢谢你
 好吧，现在我不能这样做，这就是为什么我问这个问题。关于我的问题，你知道吗？@zeeks设置这样的全局标记规则是一个巨大的错误，每次你想使用不同的
标记时都需要克服它。为了清晰起见，你能解释一下为什么要为
元素创建样式声明吗，但是我不想让那些样式应用于
a
元素吗？第三个选项对我来说很好！
.foo {
   line-height: 50px;
   display: inline-block;
   text-decoration: none;
   font-size: 16px;
   color: white;
}

<a class="foo" href="/test">test</a>

a.none {
  line-height: inherit;
  display: inherit;
  text-decoration: inherit;
  font-size: inherit;
  color: inherit;
}

<a class="none" href="/test">test</a>