本文详解如何通过 CSS 选择器优先级与样式覆盖逻辑，解决「.maintitle 文字被全局 :not(:hover) 透明度规则意外覆盖」的问题，确保关键元素（如姓名标题）恒定可见。
本文详解如何通过 css 选择器优先级与样式覆盖逻辑，解决「`.maintitle` 文字被全局 `:not(:hover)` 透明度规则意外覆盖」的问题，确保关键元素（如姓名标题）恒定可见。
在初学 Web 开发时，一个常见却易被忽略的陷阱是：看似独立的样式规则，可能因选择器权重或应用顺序发生隐式冲突。你当前遇到的问题正是典型示例——.maintitle a 被显式设为 opacity: 1，但又被更宽泛的 nav ul li a:not(:hover) 规则强制降为 opacity: 0.6，导致标题文字无法保持高可见性。
根本原因：CSS 优先级与规则覆盖逻辑
CSS 中，当多个规则作用于同一元素时，浏览器依据 特异性（specificity） 和 声明顺序 决定最终生效样式。分析你的原始代码：
.maintitle a {
opacity: 1; /* ✅ 显式设置 */
}
nav ul li a:not(:hover) {
opacity: 0.6; /* ❌ 后声明、且特异性更高（class + pseudo-class）→ 覆盖上方规则 */
}
尽管 .maintitle a 先定义，但 nav ul li a:not(:hover) 的选择器特异性更高（0,1,1,1 vs 0,1,0,1），且它匹配所有 标签（包括 .maintitle a），因此 opacity: 0.6 最终生效——这就是标题“失效”的技术根源。
正确解决方案：精准控制 + 语义化覆盖
无需复杂 hack，只需两处关键调整，兼顾可维护性与专业性：
✅ 1. 移除冗余的 :not(:hover)，改用默认状态统一设为低透明度
将原本针对“非悬停态”的显式声明，改为对所有导航项统一设置基础透明度，再单独提升悬停态与 .maintitle：
/* 所有导航链接默认 0.6 透明度 */
nav ul li a {
opacity: 0.6;
/* 其他原有样式保持不变 */
font-weight: 400;
color: #e5eafc;
text-decoration: none;
border-radius: 100px;
cursor: pointer;
}
/* 悬停时恢复 100% 不透明度 */
nav ul li a:hover {
opacity: 1;
color: #bed6ff;
}
/* 关键：确保 .maintitle 始终为 100%，且特异性 ≥ 上述规则 */
.maintitle a {
opacity: 1 !important; /* 可选，但推荐用于明确意图 */
font-size: 110%;
color: #bed6ff;
}
? 为什么 !important 是合理选择？
在此场景中，.maintitle 是具有明确语义的“品牌标识”，其视觉优先级天然高于普通导航项。使用 !important 并非滥用，而是主动声明设计意图，避免未来 CSS 变更意外破坏核心视觉层次。只要仅用于此类高语义元素，完全符合现代 CSS 最佳实践。
✅ 2. 精简 HTML 结构（可选但推荐）
当前 .maintitle 位于
- 内，逻辑上它不属于“导航列表项”，建议语义化分离：
<nav><div class="maintitle">
<a href="#">Jakub Poznański</a>
</div>
<ul>
<li><a href="#">O mnie</a></li>
<li><a href="#">Umiejętności</a></li>
<li><a href="#">Doświadczenie</a></li>
<li><a href="#">Kontakt</a></li>
</ul></nav>
对应 CSS 调整：
nav {
display: flex;
justify-content: space-between; /* 自动左右分布 maintitle 和 ul */
align-items: center;
width: 100%;
}
.maintitle a {
opacity: 1;
font-size: 110%;
color: #bed6ff;
text-decoration: none; /* 补充去除下划线 */
}
完整优化后 CSS 片段（含注释）
/* ... 其他通用样式保持不变 ... */
nav ul li a {
opacity: 0.6;
font-weight: 400;
color: #e5eafc;
text-decoration: none;
border-radius: 100px;
cursor: pointer;
transition: opacity 300ms, color 300ms; /* 显式声明过渡属性，更可靠 */
}
nav ul li a:hover {
opacity: 1;
color: #bed6ff;
}
/* 语义化标题：强制高可见性 */
.maintitle a {
opacity: 1 !important;
font-size: 110%;
color: #bed6ff;
text-decoration: none;
}
注意事项与进阶建议
- *避免全局 ` { transition: 300ms }**：该写法会对所有属性（包括box-shadow、transform等）触发过渡，可能引发性能问题或意外动画。建议显式声明需过渡的属性，如transition: opacity 300ms, color 300ms`。
- 检查 padding 语法错误：.container { padding: 10px, 10%; } 中逗号应为空格 → 改为 padding: 10px 10%;。
- 无障碍提示：确保 opacity: 1 的文字对比度满足 WCAG AA 标准（白字 #bed6ff 在黑背景上对比度约 12.8:1，合格）。
- GitHub 项目优化：你已在 GitHub 使用语义化类名（如 .maintitle），这是极佳习惯！建议后续为导航添加
通过本次调整，你不仅修复了透明度问题，更深入理解了 CSS 特异性、样式层叠机制与语义化 HTML 的协同价值——这正是专业前端开发者的成长基石。
