CSS没有'；不能正确使用HTML标记a

HTML代码：

<div class='abc'>
    <a>test1</a>
    <a class='active'>test2</a>
</div>

结果:

问题：

如您所见，所有标记A均显示为红色，class'.active'不起作用，是什么导致此结果以及如何解决此问题

谢谢。

试试：

.abc a{color: red}
.abc .active{color:green}

它不起作用的原因是因为你的第一行CSS比.active更具体，并且总是优先。越具体，优先级就越高。

试试：

.abc a{color: red}
.abc .active{color:green}

---

它不起作用的原因是因为你的第一行CSS比.active更具体，并且总是优先。越具体，优先级就越高。

。abc a

由类选择器和类型选择器组成

.active

仅包含一个类选择器

这意味着

。abc a

更重要。因为它们都匹配相同的元素并设置相同的属性，所以更具体的一个将获胜

---

使要应用的规则更加具体：

.abc a.active

.abc a

由类选择器和类型选择器组成

.active

仅包含一个类选择器

这意味着

。abc a

更重要。因为它们都匹配相同的元素并设置相同的属性，所以更具体的一个将获胜

使您要应用的规则更加具体：

.abc a.active

”。abc a“优先于”.active” 您需要的是： .abc.active

“.abc a”优先于.active” 您需要的是： .abc.active

您将需要

Js小提琴

  .abc a{color: red}

  a.active{color:green}

你需要这样做

Js小提琴

  .abc a{color: red}

  a.active{color:green}

尝试：

要覆盖属性…

请尝试：

.abc a{color: red}
.abc .active{color:green}

---

要覆盖某个属性…

问题是由于特定性（如其他答案所指出的）。另一种强制方式是添加！样式末尾的重要信息：

.active { color: green !important; }

---

不是最优雅的解决方案（实际上不鼓励），但可能适用于编码所有特定性场景会涉及太多工作的场景（例如，更改所有元素的颜色，并激活类以响应警报）。更多信息：

这个问题是因为特定性（就像其他答案指出的那样）。另一种强制方式是添加！样式末尾的重要信息：

.active { color: green !important; }

---

不是最优雅的解决方案（实际上不鼓励），但可能适用于编码所有特定性场景会涉及太多工作的场景（例如，更改所有元素的颜色，并激活类以响应警报）。更多信息：

阅读CSS专用性：&这是因为

.abc a

选择器比

.active

更专用。如果您将第二个CSS选择器更改为

.abc.active

或

a.active

，它将起作用。请仔细阅读CSS特性：&这是因为

.abc a

选择器比

.active

更具体。如果您将第二个CSS选择器更改为

.abc.active

或

a.active

，它将起作用。我不明白为什么要进行向下投票，这是另一种选择，不应该被向下投票。我清楚地说，这是用来“强迫”的风格。如果你投反对票，至少要评论一下你为什么这么做。也许他们不推荐你的答案。是的，有些人喜欢投你的反对票。就因为他们可以。我知道这是什么感觉。我猜否决票的原因（不是我）是因为使用了

！重要信息

通常不鼓励使用。然而，这可能是其中一个有效的例子。如果您希望站点上所有具有活动类的内容都显示为绿色，那么您不希望围绕各种特定场景进行编码。使用

时！重要信息

您应该知道为什么必须使用它，以及是否可以通过使用特定性来避免它。然后您应该在回答中提到不鼓励使用它，以及为什么在这种情况下它可能是有效的解决方案。我不明白为什么要投否决票，这是另一种选择，不应该被否决。我清楚地说，这是用来“强迫”的风格。如果你投反对票，至少要评论一下你为什么这么做。也许他们不推荐你的答案。是的，有些人喜欢投你的反对票。就因为他们可以。我知道这是什么感觉。我猜否决票的原因（不是我）是因为使用了

！重要信息

通常不鼓励使用。然而，这可能是其中一个有效的例子。如果您希望站点上所有具有活动类的内容都显示为绿色，那么您不希望围绕各种特定场景进行编码。使用

时！重要信息

您应该知道为什么必须使用它，以及是否可以通过使用特定性来避免它。然后您应该在回答中提到不鼓励使用它，以及为什么在这种情况下它可能是有效的解决方案。