nav ul.nav>li>a{
    padding: 5px 0 5px 10px;
    margin-left:5px;
    display: inline;
}

nav ul.nav .nav>li>a{
    //重新设置子级元素的 padding 值
    padding: 8px 20px;
    display: block;
}

一些奇怪的 CSS 问题

分享按钮的 CSS 样式

这个主题的分享的样式做的十分奇怪

.social-share-wrapper {
    float: left;
    position: relative;
    left: 50%;
        .social-share-wrapper .social-share {
            position: relative;
             left: -50%;
    }
}

在尝试了 margin: 0 auto 无果后，有点理解为什么作者用了 left: 50% 和 left: -50%这样奇怪的操作。在网上再次查阅相关资料，发现text-align: center也是一种对齐的方式。尝试后发现居然可以了。

最后样式如下。

.social-share-wrapper {
    width: 720px;
    .social-share {
        padding-bottom: 20px;
        text-align: center;
    }
}

喜欢刨根究底的我从网上看到 [margin auto 实现居中，与text-align:center的区别？][3] 有提到，margin 只能作用于外联对象，text-align 作用于内联对象。

我们设置图片标签img {margin:0 auto;} ，我们就犯了一个小错误，img类于内联对象，不可以设置图片img标签的margin属性，如果你一定想要设置，那么首先要将它的属性转变为块元素，如下面的代码：img {display:block; margin:0 auto;}。

再去 [MDN][5] 上查 text-align 类型，提到这个 CSS 属性是描述内联内容的。

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content. 来源：

看到里面的所有元素的确都是内联对象，那么 margin 不起作用也是很正常的。

样式优先级与 SASS 样式合并的问题

不理解SASS 合并时，为什么黑暗模式下会自动将markdown-body的类放在night-mode下。

各种CSS选择器的优先级问题：

奇怪的渲染错误

以及只有这一篇文章出现的渲染错误，

在 Dell U2417 显示屏上观察正常。

Safari 显示正常。

SEO 优化

参考资料

各种CSS选择器的优先级

博客建站记录（6）| 博客的最终优化与一些疑难杂症