html - 如何在我的 tumblr 静态页面上获得与我的主页(首页？)不同的链接颜色

Question

我的首页(也就是发布帖子的页面)上的链接是红色的，悬停时它们会变成白色。但是在我的 STATIC 页面上，我希望链接在悬停时为白色和红色，我该怎么做？ Tumblr 允许将 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

它不起作用，因为您实际上并未在第二个样式声明中定位 anchor 标记。尝试:

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

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

您还需要定义“:visited”样式，否则您可能看不到这些更改的反射(reflect)(因为链接已经被访问过)。

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

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

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

如果不清楚的话，第一个选择器以链接最初的状态为目标，第二个选择器以链接被访问后为目标，第三个选择器以链接的悬停状态为目标(即鼠标悬停在链接上时的样式)链接)，第四个目标是链接的事件状态(即链接实际被点击/点击的时间)。

此外，您没有使用正确的选择器按 ID 选择。 '.'按类选择，'#' 按 ID 选择。