CSS中<li>属性继承冲突：多个列表样式混杂无法按预期生效求助

问题排查结果 #

核心问题1：全局样式污染 #

你写的.menugche ul,li,a选择器存在语法逻辑错误：逗号分隔的选择器为并列匹配关系，该规则实际会匹配三类元素：

• 所有.menugche下的ul
• 页面内所有li元素
• 页面内所有a元素
  这直接导致全局的列表、链接都被强制应用了红底、白字、18px字号的样式，覆盖了顶部导航的预期样式。

核心问题2：媒体查询未闭合 #

@media (min-width: 1200px)规则块未添加闭合大括号}，导致后续的#menu_haut、#barre_bas等样式都被包裹在该媒体查询内，仅当屏幕宽度≥1200px时才会生效，宽度不足时顶部导航的自定义样式完全不加载。

核心问题3：ID重复冲突 #

HTML中id属性必须全局唯一，你给顶部导航的ul和下方所有li都设置了相同的id="menu_haut"，会导致CSS选择器匹配异常、优先级计算错误。

修复方案 #

1. 修正选择器范围，将.menugche ul,li,a改为.menugche ul, .menugche li, .menugche a，仅对侧边菜单内的元素生效。
2. 补齐@media (min-width: 1200px)的闭合大括号，修改后代码如下：

@media (min-width: 1200px){
  .container {
    max-width: 960px;
  }
}

3. 删除所有li上重复的id="menu_haut"属性，仅保留ul上的id="menu_haut"即可。
4. 可补充顶部导航链接的专属样式，进一步避免样式覆盖：

#menu_haut .nav-link {
  background: #fff;
  color: #000;
  font-size: 12px;
}
#menu_haut .menurouge .nav-link {
  background: #b1191d;
  color: #fff;
}

内容的提问来源于stack exchange，提问作者D.Picard