CSS修改链接默认蓝色时color:black样式不生效如何解决

你当前将color: black、text-decoration: none样式设置在了<ul>、<li>父元素上，开发者工具中显示父元素样式已匹配：

但是：

• 浏览器对<a>链接标签自带默认用户代理样式（默认蓝色、带下划线），直接作用在a标签上的默认样式优先级高于从父元素继承的样式，因此父元素设置的黑色字体不会覆盖a标签的默认蓝色
• text-decoration本身属于不可继承属性，设置在父元素上的该属性本身就不会传递给内部的a标签
  这就是为什么父级样式显示已生效，但链接样式始终没有变化。

直接选中目标区域内的所有<a>标签设置对应样式即可，修正后的CSS代码如下：

.Bottom-Grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 150px;
  width: auto;
  text-transform: capitalize;
  font-size: 15px;
  font-family: GT Pressura Mono, Roboto Mono, monospace;
}

.List-Five,
.List-Six,
.List-Seven,
.List-Eight,
.link-1 {
  list-style-type: none;
}

/* 直接匹配底部网格内的所有链接设置样式 */
.Bottom-Grid a {
  text-decoration: none;
  color: black;
}

提示：如果需要覆盖链接不同状态的样式（访问后、鼠标悬停、点击时），可以对应给a:visited、a:hover、a:active伪类也设置相同的黑色样式，避免不同状态下颜色变回蓝色。

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