时间戳

首页 > 解决方案 > CSS 样式未应用于 HTML 文档上的特定 div

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

问题描述

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

这个小的变化导致它不再被样式化，我不知道为什么。

以下是更改前的相关代码：

CSS：

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

HTML：

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

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

CSS：

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

HTML：

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

div 不再具有任何指定的样式属性。此外，这只发生在我的主 HTML 文档中。<div>如果我创建一个仅包含我感兴趣的新 HTML 文件并包含相同的样式表，那么所做的更改就可以正常工作。

最后，我的问题是：HTML 文档中还有什么可能会以<div>这种方式干扰 a 的样式？

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

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

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

id3）在将其属性更改为属性后，尝试了 div 的内联样式class。内联样式可以正常工作，但<style>在标题中使用标签则不行。

任何想法将不胜感激。

标签： htmlcss

解决方案

感谢您的建议，但我确实想通了，结果非常简单。我正在使用本地主机上的 MAMP 服务器运行和测试我的网站，显然它只是给了我一些文件的缓存版本，所以当我进行更新并刷新页面时，HTML 文档已更新，但浏览器仍在使用 css 文件的缓存版本，这导致没有应用 css。清除缓存和硬刷新解决了这个问题。

推荐阅读