html - 我不希望我的子页面继承父主题的链接颜色（红色），我该怎么做？

Question

我不希望我的子页面继承父主题的链接颜色（红色），而是希望我的子页面上有白色链接，我应该在 html/css 中进行哪些更改才能实现这一点？

父页面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;
   }

子页面链接

<div id="links">
<ul id="list">
<li><a href="url">bla </a></li>
</ul>
</div>

Answer 1

您需要为您的a标签添加更具体的第二个 CSS 规则。

例如：

#links a {
    color: white;
}

或者

#list a {
    color: white;
}

我将在您在示例中发布的两条规则下方添加这些规则。

但是，您也可以使用 aclass而不是 anid来使 CSS 规则更普遍适用。

附言

如果你将这个应用到你的 Tumblr 页面，可能会有其他样式冲突，所以你可能必须使 CSS 规则更加具体。我需要你的 Tumblr 页面的链接来确定。

Answer 2

这个怎么样？然后只需white-links向任何a父级添加一个类，它们就会变成白色。

HTML

<div id="links">
    <ul id="list" class="white-links">
        <li><a href="url">bla </a></li>
    </ul>
</div>

CSS

.white-links a {
    color: #fff;
}