如何让背景变色按钮正常生效？（附学校作业调试代码）

现存错误明细 #

• 选择器语法错误：CSS选择器和大括号之间、伪类前面错误放置分号，正确写法应为a.button4 {、a.button4:hover，而非带分号的错误写法
• 属性分隔符错误：所有CSS属性名和属性值之间错误使用分号分隔，CSS语法要求属性名和值之间用冒号连接，分号仅用于分隔不同属性
• 字体配置拼写错误：字体栈末尾误写sans-serifZ，多余的大写Z会导致字体配置失效
• 颜色值语法错误：color:"white"的双引号属于冗余写法，原代码中混入的HTML转义符"会直接导致CSS解析失败
• 样式标签类型错误：CSS代码需要放在<style>标签内，原代码错误闭合<script>标签，会导致样式完全不生效
• 按钮内容缺失：所有<a>标签为空，没有可展示的文本内容，会导致按钮无内容撑大，尺寸异常
• 元素布局属性缺失：<a>标签默认是行内元素，直接设置padding无法正常撑开尺寸，需要补充display: inline-block属性
• hover样式不完整：仅设置hover时的边框颜色，未给按钮预设基础透明边框，hover状态不会出现边框变化效果

修正后可直接复用的代码 #

修正后的样式代码 #

a.button4 {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  color: white;
  border: 1px solid transparent;
}
a.button4:hover {
  border-color: rgba(255,255,255,1);
}

注：以上样式需要放在HTML文件的<style>标签内生效

修正后的HTML结构 #

<div style='float: right;'>
  <a href="" class="button4" style="background-color:#f14e4e">选项1</a>
  <a href="" class="button4" style="background-color:#f1bb4e">选项2</a>
  <a href="" class="button4" style="background-color:#84f14e">选项3</a>
  <a href="" class="button4" style="background-color:#4ef18f">选项4</a>
  <a href="" class="button4" style="background-color:#4e9af1">选项5</a>
  <a href="" class="button4" style="background-color:#9a4ef1">选项6</a>
  <a href="" class="button4" style="background-color:#f14ebd">选项7</a>
</div>

可选优化提示 #

• 行内元素默认会存在字符间隙，如需消除按钮间的默认空隙，可给外层div添加font-size: 0属性，再在按钮样式里重置font-size: 17px即可
• 如需让按钮尺寸更统一，可在.button4样式里补充固定宽度属性

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