为什么我CSS文件中ul类的样式会被用户代理样式表覆盖？

• 修复CSS属性冲突：你写的ul.OPEN_menu规则中同时声明了两次display属性，display: block在前，display: initial在后，后者会覆盖前者，直接删除多余的display: initial即可。
• 修复HTML非法结构：ul的直接子元素只能是li，你当前在ul内直接放置div元素属于不符合规范的写法，浏览器加载外部CSS时的容错策略和内嵌CSS场景不同，很容易导致ul样式匹配失效。可以把Menu标题封装到单独的li标签内，给对应li加自定义类控制样式。
• 修复重复ID问题：页面中ID是唯一标识，你给多个li和div都设置了相同的MENU_heading_HIDDENID，重复ID会导致DOM解析和样式匹配异常，把重复的ID换成类即可。
• 排查类名拼写和大小写：CSS选择器对大小写敏感，确认外部CSS文件中的类名OPEN_menu、OPEN_submenu和HTML中的类名写法完全一致，没有大小写偏差或者拼写错误。
• 确认无多余类名冲突：你CSS中写了一整套ul.menu相关的display: none规则，确认你的ul元素没有被附加menu类，避免被该规则隐藏。
• 检查样式优先级覆盖：打开浏览器F12开发者工具，选中对应的ul元素，查看样式面板中ul.OPEN_menu的规则是否被划掉，如果被划掉说明有更高优先级的样式覆盖了你的设置，调整对应规则的优先级即可。
• 校验CSS文件语法：如果CSS文件中在ul样式的前面存在未闭合的大括号、遗漏分号等语法错误，会导致错误点之后的所有规则失效，如果你的li样式写在错误点之前、ul样式写在错误点之后，就会出现只有li生效的情况。可以把ul相关的样式移动到CSS文件最顶部测试是否能正常生效。

修正后参考代码 #

CSS部分

/* 删除了重复的display: initial */
ul.OPEN_menu { 
  display: block; 
  padding: 5px; 
  background-color: #c00; 
  border: 7px; 
  border-top-style: solid; 
  border-bottom-style: solid; 
  border-radius: 1em; 
  width: 10em; 
  list-style: none; 
  font: bold 20px Arial, sans-serif; 
  text-align: center; 
  text-transform: capitalize; 
  margin-left: auto; 
  margin-right: auto;
} 
ul.closedMENU { 
  display: block; 
  padding: 5px; 
  background-color: #c00; 
  border: 7px; 
  border-top-style: solid; 
  border-bottom-style: solid; 
  border-radius: 1em; 
  width: 10em; 
  list-style: none; 
  font: bold 20px Arial, sans-serif; 
  text-align: center; 
  text-transform: capitalize; 
  height: 1em; 
  margin-left: auto; 
  margin-right: auto; 
} 
ul.closedsubmenu li { 
  padding: 5px; 
  background-color: yellow; 
  border: 7px; 
  border-top-style: solid; 
  border-bottom-style: solid; 
  border-radius: 1em; 
  width: 6.9em; 
  margin: 5px; 
  list-style: none; 
  margin-left: -45px; 
  visibility: hidden; 
} 
ul.OPEN_submenu li { 
  padding: 5px; 
  background-color: yellow; 
  border: 7px; 
  border-top-style: solid; 
  border-bottom-style: solid; 
  border-radius: 1em; 
  width: 6.9em; 
  height: 3em; 
  margin: 5px; 
  list-style: none; 
  margin-left: 13px; 
  visibility: visible; 
  font: bold 24px Arial, sans-serif; 
  text-align: center; 
  text-transform: capitalize; 
}
/* 用不到的ul.menu相关规则可以直接删除 */

HTML部分

<ul class="OPEN_menu OPEN_submenu" id="box1"> 
  <!-- 把标题放到li里，符合HTML规范，重复ID替换为类 -->
  <li class="MENU_heading_HIDDEN">Menu</li>
  <li class="MENU_heading_HIDDEN"><br> 
    <a href="../Game_Art_Work.html">Game Art Work</a>
  </li> 
  <li class="MENU_heading_HIDDEN"><br> 
    <a href="../Games.html">Games</a>
  </li> 
  <li class="MENU_heading_HIDDEN"><br> 
    <a href="../Games_D.html">Game D</a>
  </li>
</ul>

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