网页导航栏文本莫名变蓝？移color至navbar解决却不解原因

问题根源 #

浏览器对<a>（超链接）标签有内置默认样式规则，其中未访问状态的链接文本会被设为蓝色（类似a:link { color: blue; }）。这个直接作用在<a>上的样式优先级远高于从body继承来的颜色——因为继承样式的权重为0，而浏览器默认样式基于元素选择器+伪类，权重更高，所以body里设置的color根本覆盖不了<a>的默认蓝色。

为什么移到navbar后生效 #

当你把color: #ece8ed从body移到navbar选择器中，<a>作为navbar的直接子元素，继承的是直接父元素的样式。虽然理论上<a>的默认样式优先级仍更高，但在实际渲染中，部分浏览器对自定义HTML标签（<navbar>是你自定义的标签）的子元素样式继承处理更直接，再加上你的页面中没有其他冲突的<a>样式规则，最终让<a>继承了navbar的颜色，解决了蓝色问题。

更稳妥的解决方案 #

最可靠的方式是直接给导航栏里的<a>标签设置颜色，避免依赖继承的不确定性：

navbar a {
    color: #ece8ed;
}

或者让<a>显式继承父元素颜色：

navbar a {
    color: inherit;
}

内容的提问来源于stack exchange，提问作者rick baker