Question

我有一个带有<div>元素的HTML文档，该元素最初是通过其id属性在单独的CSS文件中设置样式的。但是，我想在另一个具有相同样式的页面上创建类似的元素，因此我将id属性更改为class属性，并将相关CSS从#id{}更改为{{ 1}}。

这个小的更改导致它不再被设置样式，我也不知道为什么。

这是更改前的相关代码：

CSS：

.class{}

HTML：

#player_options_button_container{
    display: block;
    border: solid;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

这按预期工作。但是当我进行以下更改时：

CSS：

<div id="player_options_button_container">
    <button class="hit_button" type="button" >Hit</button>
    <button class="stay_button" type="button" >Stay</button>
</div>

HTML：

.player_options_button_container{
    display: block;
    border: solid;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

div不再具有任何分配的样式属性。此外，这仅在我的主要HTML文档中发生。如果我创建一个仅包含我感兴趣的<div class="player_options_button_container"> <button class="hit_button" type="button" >Hit</button> <button class="stay_button" type="button" >Stay</button> </div>并且包含相同样式表的新HTML文件，那么所做的更改就可以正常工作。

最终，我的问题是：这样，HTML文档中还有哪些可能会干扰<div>的样式？

我尝试过/检查过的其他事情：

1）对我的.js文件，.css文件和.html文件进行了ctrl + f搜索，以查看该类/ id是否在其他地方被调用，但是短语“ player_options_button_container”仅存在于HTML文档和CSS文件中的一个位置，而不是.js中的所有位置

2）使用chrome开发人员工具运行我的程序，并在更改前后检查了程序的html元素，但是我看不到任何奇怪的东西，也没有抛出任何错误。除此之外，我真的不知道要寻找什么。

3）在将div的<div>属性更改为id属性之后，尝试了div的内联样式。内联样式可以很好地工作，但在标头中使用class标签不能。

任何想法都将不胜感激。

Answer 1

感谢您的建议，但我确实弄清楚了，结果发现它非常简单。我正在使用本地主机上的MAMP服务器运行和测试我的网站，显然它只是给了我一些文件的缓存版本，因此当我进行更新并刷新页面时，似乎HTML文档已更新。，但浏览器仍使用css文件的缓存版本，导致未应用css。明确的缓存和硬刷新解决了该问题。

CSS样式未应用于HTML文档上的特定div

1 个答案: