html - HTML - 为什么我的CSS样式未被应用?

我有这个html :


<p>


 <span class="fancify">Parting is such sweet sorrow!</span><span> - Bill Rattleandrollspeer</span>


</p>



,还有这个css (已添加到Site.css的底部):


.fancify {


 font-size: 1.5em;


 font-weight: 800;


 font-family: Consolas,"Segoe UI", Calibri, sans-serif;


 font-style: italic;


}



我现在犯了什么新手错误?

更新

我想可能问题是,我在Site.css中的这个部分后面添加了新的类:


/********************


* Mobile Styles *


********************/


@media only screen and (max-width: 850px) {



我将对 Site.css的引用移到bootstrap.css文件下面,但是仍然没有斜体,并且在元素检查器中仍然没有看到。

下面是HTML的功能:


<p>


 <span>


 <label class="fancify">Parting is such sweet sorrow!</label>



这是我在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;


 }



但它没有被识别。

时间:

你是否试图让选择器在类的前面?


p span label.fancify {



 font-size: 1.5em;


 font-weight: 800;


 font-family: Consolas,"Segoe UI", Calibri, sans-serif;


 font-style: italic;


}



通常它会给你的CSS声明增加更多的权重,如果你有以下例子:


<div id="first">


 <p id="myParagraph">Hello <span class="bolder">World</span></p>


</div>



你可以将其设置为如下形式:


div#first p#myParagraph {


 color : #ff0000;


}



仅使用一个类创建完整的例子:


div#first p#myParagraph span.bolder{


 font-weight:900;


}



关于伪选择器和子选择器的更多信息: http://www.w3.org/TR/CSS2/selector.html

有关更多信息,请查看此站点: http://www.caniuse.com/

在CSS文件之前出现一个错误,导致你的(正确)CSS无法正常工作。

也许你的span继承了一种样式,它强制它文本正常而不是italic ,如果你不能让它在你想要的时候工作,你可以尝试把你的font-style标记为important 。


.fancify {


 font-size: 1.5em;


 font-weight: 800;


 font-family: Consolas,"Segoe UI", Calibri, sans-serif;


 font-style: italic !important;


}



将Content-Type更改为text/css解决了问题。

我假设你正在使用ASP.NET MVC,因为你提到了site.css 。

查看Bundles.config文件以查看你有没有 BundleTable.EnableOptimizations = true;如果不是,那么这可能是你的问题,因为这允许程序为bundle和"minified"。

我有一个类似的问题,这是由CSS注释中的一个简单错误引起的。

我使用JavaScript //方法编写了注释而不是/* */,这使得后面的CSS类中断。

加载样式表的link标签上的media属性的值不正确,我无意中将它设置为1而不是all ,这意味着浏览器忽略了链接样式表中的那些样式。


<link rel="stylesheet" type="text/css" href="css/style.css" media="1" />



更正:


<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />



...