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

Question

我有一个像这样的CSS规则：

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

这个HTML：

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

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

Answer 1

如果选择器与元素匹配，则它与元素匹配。

您有三种选择：

• 更改选择器，使其不匹配
• 更改元素以使其不匹配
• 编写另一个CSS规则集，该规则集位于级联的更下方，并覆盖您在第一个规则集中不具有新值的所有属性。

Answer 2

感谢大家的建议，但以下答案对我来说非常有用：

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

创建该类，然后将其附加到像这样的标记：

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

之前有人发布了这个，然后将其删除，我不知道为什么，但谢谢！

Answer 3

您可以在CSS声明中使用class selectors（.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。 < / p>