span内新增按钮CSS类未生效，排查优先级后下一步该怎么做？

我在给按钮设置CSS组件时遇到问题：现有三个按钮，其中两个原有按钮的CSS类已成功应用，但新增的第一个按钮（info-button）所在的span元素样式完全失效。

代码如下：

<div class="buttons">
    <span class="button-navy">
        <button type="button" class="info-button">안내</button>
    </span>
    <span class="button-navy">
        <button type="button" class="search-button" ng-disabled="!ctrl.displayed || ctrl.displayed.length == 0" ng-click="ctrl.printOut()">출력</button>
    </span>
    <span class="button-blue">
        <button type="button" class="search-button" ng-click="ctrl.reloadl()">새로고침</button>
    </span>
</div>

相关情况：

• 带样式的类为button-navy和button-blue（包含背景色设置），这两个类应用到新增按钮的span上均无效；
• info-button和search-button本身没有样式；
• 已多次强制刷新页面，问题仍存在；
• 已排查过CSS优先级问题，无异常。

请问下一步该检查什么？

下一步排查建议 #

• 检查HTML语法正确性：确认新增的span标签是否闭合完整、类名拼写无误，同时查看周围元素有没有语法错误导致DOM解析异常。可以通过浏览器开发者工具的Elements面板，查看这个span是否被正常识别，有没有被标记为无效元素。
• 验证DOM元素的可见性与层级：在Elements面板选中目标span，检查它的display、visibility属性是否被意外设置为none/hidden；同时查看是否有其他元素通过高z-index覆盖了它的背景色。
• 核对CSS选择器的匹配范围：检查button-navy、button-blue的CSS选择器是否存在位置限定（比如.buttons > span:nth-child(2)这类仅匹配特定位置子元素的规则），导致新增的第一个span无法匹配到样式。
• 排查AngularJS的DOM编译问题：由于项目使用AngularJS，确认新增按钮是否处于动态渲染区块中，是否存在未被正确编译的情况。可以在Elements面板查看目标span的类名是否真实存在，有没有被Angular指令意外修改或移除。
• 确认CSS文件的加载状态：在开发者工具Network面板勾选「Disable cache」后重新加载页面，检查对应CSS文件是否加载成功、是否为最新版本，排除缓存或加载失败导致的样式缺失。
• 排查其他CSS规则的干扰：在Styles面板查看目标span的background-color属性，确认是否有其他被划掉的规则覆盖了设置，或者是否继承了父元素的opacity: 0、background: transparent等属性导致背景色无法显示。

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