css - 如何设置CSS层次结构

Question

我在我的 CSS 中将主类的链接设置为橙色，但是，我希望阅读更多链接为白色，但我所做的一切都不起作用。

好的，下面是页面设置:

<div class="entry_post">
<a href="http://localhost/" class="more-link">
Read More
</a>
</div>

我的 CSS:

.entry_post a {
    color:#FF8800;
}
.entry_post .more-link a{
        color:#ffffff;
}
.more-link {
    color:#ffffff;
}

我确定我做错了什么，但我一生都不知道哪里出了问题。

Answer 1

这里有两个问题:

.entry_post .more-link a{
    color:#ffffff;
}

这是不正确的:上述规则将匹配 anchor 元素 (a)，该元素是具有 .more-link 的元素的后代> 类(它又是 .entry-post 类的继承者)。你想要的是:

.entry_post a.more-link {
    color:#ffffff;
}

其次，即使您已经有了 .more-link {color: #ffffff;}，它也会被 .entry_post a 覆盖(更具体)，所以它不适用。但如果您解决了第一个问题，您就根本不需要为此操心。