GitHub Pages自定义CSS样式被覆盖如何解决

问题背景 #

搭建GitHub Pages站点时使用midnight主题，因偏好Hacker主题的顶部按钮样式，对该部分样式做了自定义覆写，自定义样式代码如下：

---
---
@import "{{ site.theme }}";
#header nav ul li a {
  all: unset;
}
#header nav ul li {
  line-height: unset;
}
#header {
  position: static;
}

/* 适配Hacker主题按钮样式 */
.btn {
  display:inline-block;
  background:-webkit-linear-gradient(top, rgba(40,40,40,0.3), rgba(35,35,35,0.3) 50%, rgba(10,10,10,0.3) 50%, rgba(0,0,0,0.3));
  padding:8px 18px;
  border-radius:50px;
  border:2px solid rgba(0,0,0,0.7);
  border-bottom:2px solid rgba(0,0,0,0.7);
  border-top:2px solid #000;
  color:rgba(255,255,255,0.8);
  font-family:Helvetica, Arial, sans-serif;
  font-weight:bold;
  font-size:13px;
  text-decoration:none;
  text-shadow:0 -1px 0 rgba(0,0,0,0.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.btn .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 1px 8px 0 0;
  float: left;
}

a.btn-github {
  font-family:Helvetica, Arial, sans-serif;
  font-weight:bold;
  font-size:13px;
  text-decoration:none;
  text-shadow:0 -1px 0 rgba(0,0,0,0.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.btn-github .icon {
 opacity:0.6;
 background:url("../images/blacktocat.png") 0 0 no-repeat
}

对应的header结构代码如下，其中fork是midnight主题自带类，btn、btn-github为自定义替换的类：

<div id="header">
    <nav>
      <ul>
        <li class="fork btn">
            <a class="btn-github" href="https://github.com/ynikitenko/yarsync">
                <span class="icon"></span>
                View On GitHub
            </a>
        </li>
      </ul>
    </nav>
  </div><!-- end header -->

问题描述 #

尝试多种方式为.btn-github设置文本加粗样式始终被覆盖，通过Firefox检查元素可以确认样式被覆写，但无法定位覆盖来源，需要让自定义CSS规则正常生效，实现按钮文本加粗效果。
额外需求为实现按钮在header区域内垂直居中。
站点地址：https://ynikitenko.github.io/yarsync/

原因分析 #

样式被覆盖的核心原因是CSS选择器权重不足：
midnight主题原生样式中，对头部链接的选择器为#header nav ul li a，权重构成为1个ID选择器+3个标签选择器，权重值为103；而当前自定义写的a.btn-github选择器构成为1个类选择器+1个标签选择器，权重值仅为11，远低于原生样式权重，所以不管样式写在什么位置，都会被更高权重的原生样式覆盖。

解决方案 #

1. 修复文本样式被覆盖问题 #

提升自定义样式的选择器权重，把.btn-github相关的选择器补全头部层级，权重超过原生样式即可，修改后的样式代码如下：

/* 替换原有a.btn-github的样式定义 */
#header nav ul li a.btn-github {
  font-family:Helvetica, Arial, sans-serif;
  font-weight:bold;
  font-size:13px;
  text-decoration:none;
  text-shadow:0 -1px 0 rgba(0,0,0,0.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
}

修改后选择器权重为1个ID+3个标签+1个类，权重值113，高于原生样式，规则会正常生效。如果极端情况仍不生效，可以给font-weight:bold后追加!important强制生效。

2. 实现按钮垂直居中 #

给头部的导航列表加上flex布局即可，追加以下样式：

#header nav ul {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

这段代码会让列表项（也就是按钮）自动在导航区域垂直居中，不需要额外调整边距。

内容的提问来源于stack exchange，提问作者Yaroslav Nikitenko