如何让.maintitle元素始终保持100%不透明度？

方案1：提升标题链接的选择器权重 #

当前nav ul li a:not(:hover)的CSS权重比.maintitle a更高，会覆盖你设置的opacity值。可以通过增强标题链接的选择器权重来解决：

/* 替换原有的.maintitle a规则 */
nav ul li.maintitle a {
  opacity: 1;
  font-size: 110%;
  color: #bed6ff;
}

方案2：缩小非hover规则的作用范围 #

让低透明度规则只作用于非标题的列表项，直接避开标题元素：

/* 替换原有的nav ul li a:not(:hover)规则 */
nav ul li:not(.maintitle) a:not(:hover) {
  opacity: 0.6;
}

• 别给全局*设置transition，这会让所有元素都带上过渡效果，可能引发不必要的性能消耗。建议只给需要过渡的元素单独设置，比如导航链接：

  nav ul li a {
    transition: all 300ms;
    /* 其他原有样式... */
  }
  

• .container的padding写法错误，逗号要改成空格：padding: 10px 10%;，否则这个样式不会生效。
• 导航列表用flex布局更灵活：给nav ul添加display: flex; align-items: center; gap: 30px;，可以替代margin-left:30px，间距控制更直观。
• 给导航链接添加上下内边距（比如padding: 8px 16px;），扩大点击区域，提升用户体验，hover时的背景高亮效果也会更自然。
• 图片要补充alt属性，比如<img class="logo" src="images/logo.png" alt="Jakub Poznański 的个人logo">，这对网页可访问性和SEO都有帮助。

内容的提问来源于stack exchange，提问作者Jakub Poznański