为什么我的CSS样式没有被应用？

Question

我有这个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;
}

因此,我希望引用("Parting是如此甜蜜的悲伤!")用斜体字和不同于引号名称的字体(Bill Rattleandrollspeer),因为它的span标签附有"fancify"类.当然应该看到该类,因为它出现的文件引用了使用Site.css文件的布局文件.

我现在犯的是什么新手的错误？

UPDATE

我想也许问题是我在Site.css中添加了该文件后面的该部分:

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

...但我把它移到那里,它仍然没有工作,并没有通过F12 |看到 检查有问题标签的元素.

我将引用移到了bootstrap.css文件下面的Site.css,这确实改变了该文本的外观,但仍然没有斜体,仍然没有在元素检查器中看到...

更新2

以下是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;
    }

......但它没有得到认可.我认为这是css/html协议的后膛,应该由一些世界机构裁定.然后,我可能会在某处犯一些愚蠢的错误.

Answer 1

在CSS文件中可能存在错误导致您的(正确的)CSS不起作用.

Answer 2

您是否尝试过强制选择器位于课程前面？

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

CSS是一门完整的科学:)请注意,某些浏览器可能存在不兼容性,并且无法向您显示正确的结果.有关更多信息,请访问以下网站:http://www.caniuse.com/

Answer 3

当一条规则被忽略而其他规则被忽略时,我却不在乎.通过验证器运行CSS并查找解析错误.

我不小心使用//作为评论而不是/**/导致奇怪的行为.我的IDE没有说什么.我希望它对某人有帮助.

Answer 4

发布,因为它可能对将来有用的人有用:

对我来说,当我到这里时,解决方案是浏览器缓存.不得不努力刷新Chrome(cmd/ctrl + shift + R)以应用新的样式,似乎旧的缓存真的"深度".

这个问题/答案可能会派上用场.而硬刷新提示不同的浏览器对于那些谁不使用Chrome.

Answer 5

也许您的跨度继承了一种样式，该样式强制其文本为正常样式，而不是您希望的斜体样式。如果您无法按需使用它，则可以尝试将字体样式标记为重要。

.fancify {
    font-size: 1.5em;
    font-weight: 800;
    font-family: Consolas, "Segoe UI", Calibri, sans-serif;
    font-style: italic !important;
}

但是，请不要过度使用重要的东西，因为很容易陷入CSS陷阱。