问题

当我们需要对hexo的主题进行更深入的css和js修改的时候会发现一个优先级的问题，而且在浏览器中呈现的过程中这个优先级不好控制。本文解决这个问题

最开始想到的解决办法是：

既然主题是通过main.css导入各个分支的。（这个导入过程在浏览器那边显示的可能每次不一样）。那我直接在main.css最后加入修改的代码就可以保证我的代码最后执行覆盖前边的。结果还是想的太好而已。

最后的解决办法

在相应的分支处，我们修改post的btn这个类的显示效果：

image-20210329114021231

具体做法：利用full x-path 把css保证传递到位，同时用 !important 给代码最高的优先权以保证优先执行。这个做法可能笨了一些，但是是有用的。

1
2
3
4
5
6
7
body div main div div div section article div div div a {
  color: #ff9a00 !important;
  border-bottom: 2px solid #ff9a00 !important;
}
body div main div div div section article div div div {
  text-align: right !important;
}

后扎

通过在电脑上设置可以搜索文件内文字之后，找到了真正的main.css

image-20210329144017894

也不对，前边那个是真的，这个是hexo g之后通过前边的形成的文件