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;
}

我确定我做错了什么，但对于我的生活，我不知道出了什么问题。

score 2 · Accepted Answer

这里有两个问题：

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

这是不正确的：上面的规则将匹配a一个锚元素（你想要的是：.more-link.entry-post

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

其次，即使您已经拥有.more-link {color: #ffffff;}，它也被.entry_post a（更具体的）覆盖，因此它不适用。但是，如果您解决了第一个问题，则根本不需要为此烦恼。

score 1 · Accepted Answer

您需要结合标签和类选择器（标签选择器是可选的）：

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

.entry_post .more-link a不起作用，因为它意味着 a ain a .more-linkin a .entry_post。.more-link简单的问题.entry_post a是更具体，所以它会覆盖它。

score -2 · Accepted Answer

尝试

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

}

你那里有一些裁员

3 回答 3