理解选择器的核心原理
目标定位：首个 a 的准确性
在 ul/li 结构 中，目标是让样式只作用于每个 li 下的第一个 a，从而避免影响同级的其他链接。通过这种定位，可以实现对导航或列表项中第一条链接的独立美化或交互效果。
核心要点包括：使用父级选择器 li 与子级选择器 > 的组合，以及伪类 :first-of-type 的使用，从而实现对每个 li 下第一个 a 的精准选择。
ul li > a:first-of-type { color: #e91e63; font-weight:600; }
对比理解：first-child 与 first-of-type
如果使用 li > a:first-child，那么只有当 a 是 li 的第一个子元素时才会生效。若 li 内还有其它标签在 a 之前，该选择器就不再命中。
因此，为了保证在任意结构的 li 下都能正确选中第一条链接，使用 li > a:first-of-type 更为稳妥，不依赖子元素的顺序。
实战要点与应用场景
纯 CSS 实现要点
要点总结：使用 li > a:first-of-type，确保样式仅应用于每个 li 的首个 a。这对同级其他链接不产生影响，属于一种高效的局部作用域样式。
在实际页面中，这可以用于突出导航中的首个链接，或在菜单项包含图标和文本时，确保文本链接的样式独立而不破坏后续链接的外观。
nav ul li > a:first-of-type { text-decoration: none; color: #0066cc; }
进阶用法：与伪类结合的场景
还可以将 :hover、:focus 等伪类与 :first-of-type 组合，提升无障碍性和交互体验。
例如：在聚焦第一个链接时显示高对比度的背景，确保键盘操作对所有 li 生效，提升可访问性。
nav ul li > a:first-of-type:hover { background: #0056a3; }
nav ul li > a:first-of-type:focus { outline: 2px solid #ffcc00; }
兼容性与降级策略
浏览器支持要点
现代浏览器普遍支持 :first-of-type，因此上面的做法在主流环境中稳定可靠。IE 浏览器版本较旧时，可以考虑使用 JavaScript 来添加标记或使用另一组回退选择器。
若页面需要兼容性降级，请先在 CSS 中实现主流方案，再用 JS 进行回退添加类名以保持外观一致。
/* 回退方案：若不支持 :first-of-type 则放弃样式，或用 JS 处理 */
document.querySelectorAll('li').forEach(li => {const a = li.querySelector('a');if (a) a.classList.add('first-link');
});
进阶场景与注意事项
动态内容和结构变化的影响
当列表项动态添加或重新排序时，first-of-type 会实时生效，确保新加入的条目也会正确应用首个链接的样式。此特性有助于实现动态导航的稳定美化。
如果页面以无序列表作为导航，保持清晰的 HTML 结构尤为重要，避免嵌套过深或在 li 外部再包裹额外的链接，以免破坏选择逻辑。
#menu li > a:first-of-type { color: #0a0; }
