如何在我的tumblr静态页面上获得与主页不同的链接颜色

Question

我的首页（即POSTS出现的页面）上的链接是红色的，当悬停时，它们会变成白色。然而，在我的静态页面上，我希望悬停时链接是白色和红色的，我该怎么做？汤博乐允许将html添加到您的静态页面中。

这是我的首页的css标记：

  a{
  text-decoration:none;
   color:red;
   }
 a:hover{
 color:white;
-moz-transition: all .2s;
 -webkit-transition: all .2s;
 -o-transition: all .2s;
   transition: all .2;
  }

现在这是我的静态页面上的html

   <ul id="list">
    <li><a href="http://tumblr.com">test </a></li>
      </ul>

静态页面继承了首页的html和css。我试着添加

       <div id="page"> </div>

从而成为

<div id="page">
 <ul id="list">
    <li><a href="http://tumblr.com">test </a></li>
      </ul>
  </div>

然后尝试使用css进行样式设置：

ul.list li {
color: white

}

但这行不通（有人能帮我吗？

Answer 1

它不起作用，因为您实际上并没有针对第二个样式声明中的锚标记。尝试：

#page #list a {
    color: #fff; /* white */
}

这不会改变悬停状态，但会改变颜色。要更改悬停状态，您必须专门针对它来覆盖您在上面定义的通用a:hover。

您还需要定义"：visited"样式，否则您可能看不到这些更改的反映（因为链接已经被访问）。

#page #list a:visited {
    color: #fff; /* white */
}

或者，您可以在一个块中定义所有状态，假设它们应该具有相同的样式。

#page #list a, #page #list a:visited, #page #link a:hover, #page #list a:active {
    color: #fff; /* white */
}

在不清楚的情况下，第一个选择器以最初的链接为目标，第二个选择器以访问链接后的链接为对象，第三个选择器以链接的悬停状态（即鼠标在链接上时的样式）为目标，而第四个选择器以连接的活动状态（即链接实际被点击/轻击时）为目标。

此外，您没有使用正确的选择器进行ID选择。"按类别选择，"#"按ID选择。