html - 外部 CSS 的某些部分未加载

Question

我有一些定义了这个类的外部 CSS 文件

.abilityButton { 
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: black;
    visibility: hidden;
    cursor: pointer;
    margin: auto;
    float: left;
    z-index: 10;
}

然后我在主文件中定义了相同的类，带有一些我需要由 php 动态定义的属性。看起来像这样:

.abilityButton { 
    width: ".(($inner_cell_space/4) * 0.92)."px;
    height: ".(($inner_cell_space/4) * 0.92)."px;
    border-top: solid ".(($inner_cell_space/4) * 0.04)."px lightgrey;
    border-left: solid ".(($inner_cell_space/4) * 0.04)."px lightgrey;
    border-bottom: solid ".(($inner_cell_space/4) * 0.04)."px darkgrey;
    border-right: solid ".(($inner_cell_space/4) * 0.04)."px darkgrey;
}

我的问题出在外部文件中，其中只有这 3 个背景属性有效。其他的只是消失了，没有在浏览器开发工具中显示。它们显然也没有应用，我不明白这个问题。

我确信没有什么可以直接覆盖它们，所以我不知道如何解释这种行为。

我需要解释的是，为什么外部文件中的属性会被丢弃，以及如何防止它。

编辑 1

MS Edge 正确呈现页面。所以问题可能是我 Chrome 本身。ctrl + shift + r 不起作用。检查元素结果:Chrome 现在说源 CSS 确实包含属性(但没有应用)

Answer 1

要记住的一件事是样式表是级联的。它们可能在其他地方被覆盖。

您应该在浏览器中使用元素检查器来定位应该具有样式的元素，并向下滚动侧边栏以查看它们是否正在应用，但正在被其他内容覆盖。

有时，解决此问题的方法只是在您的 CSS 中更加具体。