css - 我多次尝试在同一页面上为同一事件获取两种样式，但它不起作用

Question

我的超链接只需要一个特定页面的“橙色”颜色。已经有一个为其他页面设计的 .css 文件。现在我如何告诉 html 以不同的方式为一页设计链接。无论我尝试什么，它都会从包含的 .css 文件中选取样式。请告诉我如何只为网站的一个特定页面编写不同的链接样式。谢谢...

这是我试过的三种方法

a:link { color: orange;}
a:visited {color: orange;}
a:hover {color: orange;}
a:active {color: orange;}

div.nav a:link, div.nav a:visited, div.nav a:hover, div.nav a:focus, div.nav a:active 
  { 
  color: orange; 
  }

a.nav1:link,a.nav1:visited,a.nav1:active
  { 
  color: orange; 
  }

编辑:它不工作。让我再解释一下。假设我有三个深色背景的文件，header.php、one.php 和 two.php。为所有这三个文件设置了 CSS 样式……链接、已访问、悬停、焦点和事件所有颜色均为白色。

现在我有一个新文件 three.php，背景颜色为白色.. 所以链接被隐藏了。实际上它在那里，但由于链接样式颜色为白色且页面背景也是白色，因此不可见。我想做这个橙子。

当我这样做时，在 css 文件中，所有前三个文件的链接颜色都从白色变为橙色。头文件中的所有链接颜色都从白色变为橙色。

如何在不更改其他文件的超链接颜色的情况下仅在新的第四页中保留橙色链接(墨迹、已访问、悬停、聚焦和激活所有内容)？

谢谢

Answer 1

您可以向该特定页面添加一个包装器并将其命名为例如 <div id="specificPage"></div>此包装器需要包装您在此页面上创建的所有内容。

之后只需添加 #specificPage到你的 CSS decalartions:

#specificPage a:link { color: orange;}
#specificPage a:visited {color: orange;}
#specificPage a:hover {color: orange;}
#specificPage a:active {color: orange;}

#specificPage div.nav a:link,#specificPage div.nav a:visited, #specificPage div.nav a:hover, #specificPage div.nav a:focus, #specificPage div.nav a:active 
{ 
    color: orange; 
}

#specificPage a.nav1:link, #specificPage a.nav1:visited, #specificPage a.nav1:active
{ 
    color: orange; 
}

您还可以声明一个特定的类。例如类 orange为你的a标签。在您的 CSS 中，它将是这样的:

.orange {
    color:orange;
}

您现在需要做的就是将此类添加到 HTML 结构中的超链接中。

---

例子: <a href="#" class="orange">LINK</a>