CSS中的悬停问题 - 覆盖

Question

好的，这是我放在母版页上的css代码，所以它也适用于所有子页面：

Master.css

a
{
  color:Red;
}

a:hover
{
  color:Blue;
}

现在在某些页面上我需要更改链接的颜色和悬停颜色，如：

某些子页面

a
{
  color:Gray;
}

a:hover
{
  color:Maroon;
}

但问题是它不会改变我后来定义的方式。我使用了特定的id和class方法，但它们也无效。

当我想要更改某些特定的元素样式时，我使用内联样式属性来执行此操作但现在:hover开始起作用，我认为我不能将其声明为内联。

Answer 1

CSS根据声明的具体程度选择冲突的规范。

您可以通过在css声明的末尾指定类，ID或添加!important来提高特异性。例如：

a:hover
{
  color:Maroon;
}

将被

覆盖

a.link:hover
{
  color:Blue;
}

将被

覆盖

#link1:hover
{
  color:Red;
}

将被

覆盖

a:hover
{
  color:Green !important ;
}

Answer 2

我使用了特定的id和类方法，但它们也不起作用。
你能澄清一下吗？ 使用特定选择器是可行的方法。 An example。

在那里，我为整个页面定义了常见的a。

a {
  color:Red;
}

以及我想要应用的特定区域的自定义样式。

.new-look a {
  color: Gray;
}

Answer 3

您的HTML标记同样重要。

a { color:red; }
a:hover { color:blue; }

a.foo { color:green; }
a.foo:hover { color:black; }

<a href="#">red</a>
<a href="#" class="foo">green</a>

将起作用，除非其他事情发挥作用。

或正如其他帖子所暗示的那样〜

.foo a { color:red; }
#bar a:hover { color:blue; }

记住ID优先于类。