魔改博客主题的时候，发现追番和豆瓣图书、电影页面的tab处字是黑色的，与背景色很像，但是F12后发现字体颜色已经设置为白色了，但是未生效🙃，当时觉得很奇怪，去网上搜了一些教程，来解决这个问题.

1. 设置样式被覆盖

如图，我需要把已看改为白色，检查发现a标签样式的字体颜色覆盖了hexo-douban-active类的字体颜色样式。

1
2
3
4
5
6
7
8
#article-container a {
    color: #2b3037;
}

.hexo-douban-active {
    background: #008080;
    color: #fff; /*这里的color未生效*/
}

2. 了解样式优先级

  1. 样式表的元素选择器越精确，则其中的样式优先级越高。
    id选择器指定样式 > 类选择器指定样式 > 元素类型选择器指定样式
    所以这里#article-container样式的优先级是大于.hexo-douban-active样式，即使.hexo-douban-active是新添加的也不起作用。
  2. 对于相同类型选择器指定的样式，在样式表文件中，越靠后优先级越高。
    这里指的是在style标签或.css文件中出现的顺序，不是指在HTML中出现的顺序。

3. 解决方法

这里明显是上述所说的第一类问题。

  1. 不在#article-container中设置字体颜色，只在.hexo-douban-active中设置。但这样会有一个问题，整个文章内容的字体颜色无法修改，且主题模板中仍有这个id的样式设置，修改太复杂😭。
  2. 这里新增加一个类将面临的问题和上面相同。
  3. 使用 !important使设置的样式不被覆盖，优先级最高。超好用！

最终使用!important成功修改样式~

4. 参考