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

Question

我有一个CSS规则如下：

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

And this HTML:

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

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

- zeeks

Answer 1

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

你有三个选择：

• 更改选择器，使其不匹配
• 更改元素，使其不被匹配
• 编写另一个 CSS 规则集，下降到级联中更靠后的位置，并使用新值覆盖第一个规则集中不喜欢的每个属性。

- Quentin

---

第三个选项对我很有效！ - Matthew Lock

Answer 2

在你的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>

当您不希望您的元素具有这些样式时，只需省略该类或应用您可能声明的其他类。

---

内联样式 另一个选项是使用内联样式，这解决了您的问题，但并不符合最佳实践（在几个层面上）。

由于您说您不希望外部（或嵌入的）样式适用，因此您只想要样式不同。 您可以使用以下内容实现目标：

1. 保留原始CSS声明不变。 2. 更改HTML：<a href="/test" style="your preferred styles here">test</a> 在这种情况下，内联样式将优先于其他样式。

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

- Michael Benjamin

---

现在我不能那样做，这就是为什么我问这个问题的原因。对我的问题有任何想法吗？ - zeeks

@zeeks 设置一个全局标签规则是一个巨大的错误，每次想要使用不同的<a>标签都需要覆盖它。 - charlietfl

为了清晰起见，您能否解释一下为什么要为a元素创建样式声明，但又不希望这些样式应用于a元素？ - Michael Benjamin

Answer 3

感谢大家提供的建议，但下面的答案对我非常有效。

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

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

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

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

- zeeks