为何为nav-container设置的背景色未生效到内部ul、li元素

问题排查与修复 #

• 1. CSS语法错误
     你写的.nav-ul-2 li规则中混入了无效字符[enter image description here][1]，导致整条过渡动画规则被浏览器直接忽略，删除无效字符即可修复：

/* 修改后的正确代码 */
.nav-ul-2 li {
  transition: all 0.3s ease 0s;
}

• 2. 浏览器默认样式干扰
     所有浏览器默认会给<ul>标签添加上下外边距、左内边距，你的.nav-container仅设置了上下10px的内边距，<ul>的默认外边距很可能超出了导航容器的覆盖范围，导致看起来父元素的背景没有覆盖到列表元素。可以主动重置列表的默认样式解决：

.nav-ul-1, .nav-ul-2 {
  list-style-type: none;
  /* 清除浏览器默认边距 */
  margin: 0;
  padding: 0;
}

相关原理说明 #

你对CSS属性继承的认知存在偏差：并不是所有父元素的样式都会自动作用到子元素上，只有color、font-size、font-family这类文本相关属性才默认支持继承，背景属性默认是不继承的。
正常情况下子元素的默认背景值为transparent（透明），所以父元素的背景会透出来，你看不到效果本质是上面两个问题导致的，不是父元素背景本身没有生效。如果确实需要让子元素主动继承父元素的背景，可以手动设置background-color: inherit。

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