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正确呈现页面。所以问题可能是我自己的铬。 ctrl + shift + r不起作用。检查元素结果：Chrome现在说源CSS确实包含属性（但不应用它们）

Answer 1

要记住的一件事是样式表是级联的。它们可能会在别处被覆盖。

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

有时，对此的修复只是在CSS中更具体。

Answer 2

由于css规则未显示在检查器中，因此可能是缓存，或者您正在编辑错误的文件/在进行更改后未上载文件。

您是否尝试使用 ctrl + shift + r 或 cmd + 移 + - [R ？外部css文件可能会被您的浏览器缓存。也许我说的是显而易见的事情，但它经常发生在我身上，而不是我想承认。

外部CSS的某些部分未加载

2 个答案: