如何设置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;
}

这是不正确的：上面的规则会匹配一个锚元素（a），它是一个带有.more-link类的元素的后代（后者又是一个死者） .entry-post类的。你想要的是：

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

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

Answer 2

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

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

.entry_post .more-link a不起作用，因为它表示a中.more-link中的.entry_post。简单.more-link的问题是.entry_post a更多specific，因此它会覆盖它。

Answer 3

尝试

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

}

那里有一些裁员