如何修改div类内超链接的颜色且保留对齐效果？

问题出在你只给div设置了颜色，但<a>标签自带浏览器默认样式（比如访问前蓝色、访问后紫色），这些样式优先级比继承来的颜色高，所以div的颜色不会作用到链接上。不用移除div，直接针对链接设置样式就行，给你几种方案：

方案1：直接选中div下的所有链接 #

把CSS改成这样，同时把内联的对齐样式移到CSS里，代码更整洁：

#link {
  font-size: 25px;
  text-align: center;
}
/* 选中id为link的div下的所有a标签 */
#link a {
  color: #ffffff;
}

对应的HTML可以去掉内联style：

<div id='link'>
  <a id='left' href="how.html">How to Avoid Fighting</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a id='center' href="why.html">Why You Should Not Fight</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a id='right' href="Ways.html">Ways to Fight</a>
</div>

方案2：让链接继承父元素颜色 #

如果想让链接直接用div的颜色，给a标签设置color: inherit就行：

#link {
  font-size: 25px;
  color: #ffffff;
  text-align: center;
}
#link a {
  color: inherit;
}

优化排版（可选） #

你现在用一堆 来分隔链接，其实可以用flex布局更灵活美观，不用手动加空格：

#link {
  font-size: 25px;
  color: #ffffff;
  display: flex;
  justify-content: space-around; /* 三个链接均匀分布在容器里 */
  align-items: center;
}
#link a {
  color: #ffffff;
}

HTML直接去掉所有 ：

<div id='link'>
  <a id='left' href="how.html">How to Avoid Fighting</a>
  <a id='center' href="why.html">Why You Should Not Fight</a>
  <a id='right' href="Ways.html">Ways to Fight</a>
</div>

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