如何修复嵌套元素内的CSS样式？按钮紫色未正常显示排查

导致按钮样式不符的核心问题 #

1. 边框宽度被覆盖 #

你的.button样式中，border-width: 10px写在border: #c1affa outset之前，而border是简写属性，会重置边框宽度为浏览器默认值（覆盖之前的10px设置），导致按钮边框没有达到预期的厚度，整体外观偏离设计。

2. 居中属性无效 #

align-items和align-content是flex容器的专属属性，但你没有给按钮设置display: flex，这两个属性完全不生效，按钮内的文字无法实现垂直水平居中，导致视觉效果不符。

3. 绝对定位的参考元素缺失 #

按钮使用position: absolute，但父元素.main没有设置position: relative，按钮会相对于整个文档（body）定位，可能导致位置偏移，进一步让样式看起来不符合预期。

4. 侧边栏JS函数的语法错误（非按钮问题，但需修复） #

hideSidebar函数中document.querySelector('sidebar')缺少类选择器的.，应该写成document.querySelector('.sidebar')，否则无法找到侧边栏元素，隐藏功能失效。

修复后的代码 #

修正后的CSS代码 #

.sidebar {
  position: fixed;
  height: 100vh;
  flex-direction: column;
  display: none;
  width: 250px;
  background-color: #333;
  align-items: flex-start;
  justify-content: flex-start;
}

.sidebar a {
  font-size: 20px;
  color: white;
  font-weight: 400;
  margin-top: 100px;
  width: 100%;
  text-decoration: none;
}

.sidebar a:hover {
  color: black;
}

.button {
  position: absolute;
  border-radius: 30px;
  /* 添加display:flex让居中属性生效 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  margin-top: 7.5%;
  margin-left: 43.5%;
  font-size: 30px;
  color: white;
  background-color: #4616e0;
  font-family: 'Barlow', sans-serif;
  transition-timing-function: ease;
  transition-duration: 0.3s;
  /* 将边框宽度合并到border简写中 */
  border: 10px #c1affa outset;
}

.button:hover {
  background-color: #a394d4;
  color: #4616e0;
  transform: translateY(-10px);
  border: 3px #4616e0 outset;
}

/* 给父元素添加相对定位，让按钮绝对定位参考正确 */
.main {
  position: relative;
}

修正后的JS代码 #

function showSidebar() {
  const sidebar = document.querySelector('.sidebar')
  sidebar.style.display = 'flex'
}

function hideSidebar() {
  const sidebar = document.querySelector('.sidebar')
  sidebar.style.display = 'none'
}

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