CSS通用选择器导致背景色覆盖问题详解

解决方案：精确控制元素背景色

要解决这个问题，我们需要撤销通用选择器对特定元素背景色的影响，或者更精确地控制这些元素的背景色。最直接有效的方法是为受影响的元素（即 .P1 及其子元素

）显式地设置一个透明的背景色，或者设置为其父元素的背景色。

通过将 .P1 和其内部的

元素的 background-color 属性设置为 transparent，它们将允许其父元素 的背景色（#543DAF，紫色）透过显示出来，从而达到预期的视觉效果。

/* 修正后的CSS */
html,
body {
  font-family: 'Cinzel Decorative', cursive;
  text-align: center;
  background: #543DAF; /* body的背景色 */
}

body {
  padding-bottom: 56px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* 移除或修改此处的background属性，或通过更具体的选择器覆盖 */
  /* background: #30302F;  如果必须保留，则需通过后续规则覆盖 */
}

/* ... 其他样式保持不变 ... */

/* 针对特定元素覆盖背景色，使其透明 */
.P1,
.P1 > p {
  background-color: transparent; /* 允许body的背景色透过 */
}

修正后的HTML结构通常不需要大幅改动，但为了更好的语义化和避免潜在的浏览器问题，可以对导航栏内部的列表项结构进行优化，例如将按钮直接放在 标签内，而不是额外的

  

    
    
    Roleplay Server
  

  
  

    
Welcome, fellow travellers! To Athra: Age of Kings