[英]CSS styling not being applied to a specific div on an HTML document
I have an HTML document with a <div>
element that was originally styled in a separate CSS file via its id
attribute. 我有一个带有
<div>
元素的HTML文档,该元素最初是通过其id
属性在单独的CSS文件中设置样式的。 However, I wanted to create a similar element on another page with the same styling, so I changed the id
attribute to a class
attribute, and changed the relevant CSS from #id{}
to .class{}
. 但是,我想在另一个具有相同样式的页面上创建类似的元素,因此我将
id
属性更改为class
属性,并将相关的CSS从#id{}
更改为.class{}
。
This small change causes it to no longer be styled, and I don't know why. 这个小的更改导致它不再被设置样式,我不知道为什么。
Here is the relevant code before the change: 这是更改之前的相关代码:
CSS: CSS:
#player_options_button_container{
display: block;
border: solid;
margin-left: auto;
margin-right: auto;
text-align: center;
}
HTML: HTML:
<div id="player_options_button_container">
<button class="hit_button" type="button" >Hit</button>
<button class="stay_button" type="button" >Stay</button>
</div>
This works as expected. 这按预期工作。 But when I make the following changes:
但是当我进行以下更改时:
CSS: CSS:
.player_options_button_container{
display: block;
border: solid;
margin-left: auto;
margin-right: auto;
text-align: center;
}
HTML: HTML:
<div class="player_options_button_container">
<button class="hit_button" type="button" >Hit</button>
<button class="stay_button" type="button" >Stay</button>
</div>
the div no longer takes on any of the assigned styling attributes. div不再具有任何分配的样式属性。 Furthermore, this only happens within my main HTML document.
此外,这仅在我的主要HTML文档中发生。 If I create a new HTML file that contains only the
<div>
I am interested in and include the same style sheet, then the changes work just fine. 如果我创建一个仅包含我感兴趣的
<div>
并包含相同样式表的新HTML文件,则所做的更改就可以正常工作。
Ultimately, my question is: what else in an HTML document could possibly be interfering with the styling of a <div>
in this way? 最终,我的问题是:这样,HTML文档中还有什么可能会干扰
<div>
的样式?
Other things I have tried/checked: 我尝试过/检查过的其他内容:
1) ran a ctrl+f search of my .js file, my .css file and my .html file to see if that class/id was being called elsewhere, but the phrase "player_options_button_container" only exists in one location in the HTML doc and one location in the CSS file and not at all in .js 1)对我的.js文件,.css文件和.html文件进行ctrl + f搜索,以查看是否在其他地方调用了该类/ id,但是短语“ player_options_button_container”仅存在于HTML文档中的一个位置在CSS文件中只有一个位置,而在.js中根本没有
2) ran my program with chrome developer tools and inspected the html elements of my program, both before and after the change, but I couldn't see anything odd and no errors were getting thrown. 2)在更改之前和之后,使用chrome开发人员工具运行我的程序并检查了程序的html元素,但是我看不到任何奇怪的东西,也没有抛出任何错误。 Other than that, I don't really know what to look for.
除此之外,我真的不知道要寻找什么。
3) tried in-line styling of the div, after changing it's id
attribute to a class
attribute. 3)在将div的
id
属性更改为class
属性后,尝试对div进行内联样式设置。 in-line styling works fine, but using a <style>
tag in the header does not. 内联样式工作正常,但在标头中使用
<style>
标记无效。
Any ideas would be greatly appreciated. 任何想法将不胜感激。
Thanks for the advice, but I did figure it out and it turned out to be really simple. 感谢您的建议,但我确实弄清楚了,事实证明它很简单。 I'm running and testing my site with a MAMP server on localhost, and apparently it was just giving me a cached version of some of my files, so it seems like when I made an update and refreshed the page, the HTML document was updated, but the browser was still using a cached version of the css file, which resulted in no css being applied.
我正在使用本地主机上的MAMP服务器运行和测试我的网站,显然它只是给了我一些文件的缓存版本,因此当我进行更新并刷新页面时,似乎HTML文档已更新。 ,但浏览器仍使用css文件的缓存版本,导致未应用css。 A clear cache and hard refresh solved the problem.
清除缓存和硬刷新解决了该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.