如何覆盖我的一般CSS链接样式

Question

我的CSS中有这种一般风格：

a:link, a:visited, a:active {
  color: #green;
  text-decoration: underline;
  font-weight: 500; 
}

现在我尝试使用以下内容覆盖链接：

.post-title a {
    color: #333333;
    text-decoration: none;
}

.post-title .level-one a {
    color: #red;
    text-decoration: none;
}

.post-title .level-two a {
    color: #orange;
    text-decoration: none;
}


<p class=""><a href="" class="post-title level-one">Hello world</a></p>

我的CSS未应用，文字颜色为绿色，并带有下划线。

我该如何解决这个问题？

Answer 1

您需要使用与要覆盖的规则相同的伪选择器，如果a链接本身具有这些类（我最初没有看到），则必须使用将它们附加到a链接，而不用之间的空格

a:link.post-title , a:visited.post-title , a:active.post-title  { .......

等

Answer 2

CSS中的空格分隔元素。所以

.post-title .level-one {  ...  }

正在寻找一个类level-one的元素，其中位于类post-title的另一个元素中。

在你的情况下，

.post-title .level-one a {  ...  }

实际上是在里面找到一个<a>标记一个元素level-one，里面的是一个类post-title的父元素！

此：

.post-title.level-one {  ...  }

查找包含班级post-title 和 level-one的元素。

所以，正如Drew Kennedy所评论的那样，只需删除覆盖中的空格，一切都应该没问题！

a:link, a:visited, a:active {
    color: green;
    text-decoration: underline;
    font-weight: 500;
}

.post-title.level-one {
    color: orange;
    text-decoration: none;
}

<p>
    <a href="" class="wrong-class"> Greenie! </a>
</p>
<p>
    <a href="" class="post-title level-one"> Orangy! </a>
</p>