Html 为什么我的 CSS 样式没有被应用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16513530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my CSS style not being applied?
提问by B. Clay Shannon
I've got this html:
我有这个 html：
<p>
<span class="fancify">Parting is such sweet sorrow!</span><span> - Bill Rattleandrollspeer</span>
</p>
...and this css (added to the bottom of Site.css):
...还有这个 css（添加到 Site.css 的底部）：
.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
So, I would expect the quote ("Parting is such sweet sorrow!") to be italicized, and of a different font than the name of the quotee (Bill Rattleandrollspeer), since its span tag has the class "fancify" attached to it. The class should certainly be seen, as the file in which it appears references the layout file which uses the Site.css file.
所以，我希望引用（“离别是如此甜蜜的悲伤！”）是斜体的，并且与引用者的名字（Bill Rattleandrollspeer）的字体不同，因为它的跨度标签附加了类“fancify” . 该类当然应该被看到，因为它出现的文件引用了使用 Site.css 文件的布局文件。
What rookie mistake am I making now?
我现在犯了什么菜鸟错误？
UPDATE
更新
I thought maybe the problem was that I had added the new class in Site.css following this section in that file:
我想问题可能是我在 Site.css 中在该文件的这一部分之后添加了新类：
/********************
* Mobile Styles *
********************/
@media only screen and (max-width: 850px) {
...but I moved it above there, and it is still not working, and not seen via F12 | Inspect element for the label in question.
...但我将它移到了上面，但它仍然无法正常工作，并且无法通过 F12 看到 | 检查相关标签的元素。
I moved the reference to Site.css below the bootstrap.css file, which does indeed change the appearance of that text, but still not italicized, and still not seen in the element inspector...
我在 bootstrap.css 文件下面移动了对 Site.css 的引用，这确实改变了该文本的外观，但仍然没有斜体，并且仍然没有在元素检查器中看到......
UPDATE 2
更新 2
Here's how the HTML is coming down:
以下是 HTML 的下降方式：
<p>
<span>
<label class="fancify">Parting is such sweet sorrow!</label>
...and here's my css rule in Site.css:
...这是我在 Site.css 中的 css 规则：
p span label .fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
display: inline;
}
...but it's not being recognized. I consider this a breech of css/html protocol, and should be adjudicated by some world body. Then again, I could be making some silly mistake somewhere.
......但它没有被识别。我认为这是 css/html 协议的后遗症，应该由某个世界机构裁决。再说一次，我可能在某处犯了一些愚蠢的错误。
采纳答案by hayonj
Have you tried forcing the selectors to be in the front of the class?
您是否尝试过强制选择器位于班级前面？
p span label.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
Usually it will add more weight to your CSS declaration. My mistake ... There should be no space between the selector and the class. The same goes for the ID. If you have for example:
通常它会给你的 CSS 声明增加更多的权重。我的错误......选择器和类之间不应该有空格。身也是一样。例如，如果您有：
<div id="first">
<p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>
You would style it like this:
你会这样设计：
div#first p#myParagraph {
color : #ff0000;
}
Just to make a complete example using a class:
只是为了使用类做一个完整的例子：
div#first p#myParagraph span.bolder{
font-weight:900;
}
For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html
有关伪选择器和子选择器的更多信息：http: //www.w3.org/TR/CSS2/selector.html
CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/
CSS 是一门完整的科学 :) 请注意，某些浏览器可能存在不兼容问题，并且不会向您显示正确的结果。有关更多信息，请查看此站点：http: //www.caniuse.com/
回答by Andrew Koper
There could be an error earlier in the CSS file that is causing your (correct) CSS to not work.
之前的 CSS 文件中可能存在错误，导致您的（正确的）CSS 无法正常工作。
回答by hipnosis
I was going out of my mind when a rule was being ignored while others weren't. Run your CSS through a validator and look for parsing errors.
当一条规则被忽略而其他规则被忽略时，我快疯了。通过验证器运行您的 CSS 并查找解析错误。
I accidentally used // for a comment instead of /* */ causing odd behavior. My IDE said nothing about it. I hope it helps someone.
我不小心使用 // 作为注释而不是 /* */ 导致奇怪的行为。我的 IDE 对此一无所知。我希望它可以帮助某人。
回答by trainoasis
Posting, since it might be useful for someone in the future:
发布，因为它可能对将来的某人有用：
For me, when I got here, the solution was browser cache. Had to hard refresh Chrome (cmd/ctrl+shift+R) to get the new styles applied, it seems the old ones got cached really "deep".
对我来说，当我到达这里时，解决方案是浏览器缓存。必须硬刷新 Chrome (cmd/ctrl+shift+R) 才能应用新样式，似乎旧样式被缓存得非常“深”。
This question/answermight come in handy for someone. And hard refresh tips for different browsersfor those who don't use Chrome.
这个问题/答案可能对某人有用。以及针对不使用 Chrome 的用户的不同浏览器的硬刷新提示。
回答by Cesar
Maybe your span is inheriting a style that forces its text to be normal instead of italic as you would like it. If you just can't get it to work as you want it to you might try marking your font-style as important.
也许您的跨度继承了一种样式，强制其文本为正常而不是您希望的斜体。如果你不能让它按照你想要的方式工作，你可以尝试将你的字体样式标记为重要。
.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic !important;
}
However try not to overuse important because it's easy to fall into CSS-hell with it.
但是尽量不要过度使用 important 因为它很容易陷入 CSS 地狱。
回答by CodySig
I know this is an old post but I thought I might add a thought for people who come across a similar problem. I'm assuming that you are using ASP.NET MVC since you mentioned site.css.
我知道这是一个旧帖子，但我想我可能会为遇到类似问题的人添加一个想法。我假设您使用的是 ASP.NET MVC，因为您提到了site.css。
Check your Bundles.configfile to see if you have BundleTable.EnableOptimizations = true; If you don't, then it can be your problem since this allows the program to be bundles and "minified". Depending on if you run in debug mode or not this could have an effect.
检查您的Bundles.config文件，看看您是否有BundleTable.EnableOptimizations = true；如果你不这样做，那么这可能是你的问题，因为这允许程序被捆绑和“缩小”。取决于您是否在调试模式下运行，这可能会产生影响。
回答by Spikolynn
For me, the problem was incorrect content type of the served .css file (if it included certain unicode characters).
对我来说，问题是所提供的 .css 文件的内容类型不正确（如果它包含某些 unicode 字符）。
Changing the content-type to text/csssolved the problem.
更改内容类型以text/css解决问题。
回答by enhancedHyman
In my case, I nested a class in my SASS file in the wrong place...
就我而言，我在 SASS 文件中的错误位置嵌套了一个类...
回答by the12
In addition to the solutions posted above, having gone through the exact same problem, make sure you check your HTML. More specifically whether you've properly labelled your elements, as well as class and id selectors. You can do this either manually or through a validator (https://validator.w3.org/).
除了上面发布的解决方案之外，在遇到完全相同的问题后，请确保检查您的 HTML。更具体地说，您是否正确标记了元素以及类和 id 选择器。您可以手动或通过验证器 ( https://validator.w3.org/)执行此操作。
For me, I missed the equal sign next to the class (<div class someDiv>vs <div class = "someDiv">, hence why no CSS property was applied.
对我来说，我错过了类旁边的等号（<div class someDiv>vs <div class = "someDiv">，因此为什么没有应用 CSS 属性。
回答by user12893298320392
Reasoning for my CSS styles not being applied, even though they were being loaded:
推理我的 CSS 样式没有被应用，即使它们被加载：
The mediaattribute on the linktag which was loading the stylesheet had an incorrect value. I had inadvertently set it to 1instead of all. This meant the browser was ignoring those styles in that linked stylesheet.
在media该属性link这是载入样式表标签有一个不正确的值。我无意中将它设置为1而不是all. 这意味着浏览器会忽略链接样式表中的那些样式。
Broken:
破碎的：
<link rel="stylesheet" type="text/css" href="css/style.css" media="1" />
Corrected:
更正：
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
