关于CSS导航栏hover样式精简写法的两个疑问

问题1：为什么精简写法要在#nav .subnav li:hover后加a？ #

color属于CSS可继承属性，你直接给li:hover设置颜色理论上可以被子元素继承，但浏览器对<a>标签有内置的默认样式，会直接给<a>指定color值，这个内置样式的优先级远高于从父元素继承的样式，所以你给li设置的hover颜色不会作用到<a>上，文字不会变成预期的黑色。
背景色虽然可以在li上正常显示，但导航场景下一般都会给<a>加padding扩大点击区域，把样式直接绑定到li:hover a，是直接控制可点击元素本身的样式，既避免了<a>默认样式的干扰，也能保证样式生效范围和点击区域完全对应，同时和第二段控制一级导航<a>的逻辑统一，更方便合并代码。

问题2：为什么给非hover状态的#nav > li设置display: inline-block可以替代hover状态下<a>的同名属性？ #

在hover状态下才修改display属性是错误的实践：display属于布局属性，变化会触发页面重排，很容易导致hover瞬间出现导航元素抖动、移位的异常效果。
#nav > li {display: inline-block;}是在页面加载完成时就把一级导航的li从默认的块级元素（独占一行）修改为行内块元素，直接实现了多个一级导航横向排列的布局效果，此时li本身会自适应内部<a>的尺寸，不需要再在hover时临时修改<a>的display属性来调整布局，页面布局从一开始就固定，不会出现hover抖动的问题，也减少了重复代码。
如果你需要让<a>支持上下padding、margin来扩大点击区域，还可以直接给所有#nav li a默认添加display: inline-block和对应内边距，效果比在hover时再设置更稳定。

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