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

How to stop a CSS rule from applying to a specific element

本文关键字：元素 应用于 规则 何阻止 CSS      更新时间：2023-09-26

我有一个这样的CSS规则:

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

这个HTML:

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

如何阻止CSS规则只应用于这个元素?

如果一个选择器匹配一个元素，那么它就匹配这个元素。

你有三个选择:

  • 改变选择器使它不匹配
  • 更改元素，使其不匹配
  • 编写另一个CSS规则集，该规则集在级联中进一步下降，并用新值覆盖第一个规则集中你不喜欢的每个属性。

你可以在CSS声明中使用类选择器(.foo)而不是元素选择器(a)。

所以我们不这样做:

CSS 

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

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

你可以这样做:

CSS 

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

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

当你不希望你的a元素有这些样式，只需省略类或应用一个不同的类，你可能已经声明。

内联样式

另一个解决你的问题，但不符合最佳实践(在几个层面上)的选择是使用内联样式。

既然你说你不希望外部(或嵌入)样式应用，因此你只希望a样式是不同的。你可以这样完成你的目标:

  1. 保持原来的CSS声明不变
  2. 修改HTML:<a href="/test" style="your preferred styles here">test</a>

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

注意内联样式优先于外部和嵌入样式，除非外部和嵌入声明包含!important，而内联样式不包含!important。

感谢大家的建议，但下面的答案对我来说非常有效:

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

创建这个类，然后像这样将它附加到a标签上:

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

之前有人发了这个，然后删掉了，我不知道为什么，但是谢谢你!

相关文章：