为什么我的CSS样式没有被应用? [英] Why is my CSS style not being applied?

问题描述

我有这个html:

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

...以及此CSS(添加到Site.css的底部):

...and this css (added to the bottom of 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文件的布局文件.

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.

我现在在犯什么菜鸟错误?

What rookie mistake am I making now?

我认为可能是问题在于我在该文件中此部分之后的Site.css中添加了新类:

I thought maybe the problem was that I had added the new class in Site.css following this section in that file:

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

...但是我将其移至该位置上方，但仍无法正常工作，也无法通过F12看到它|检查元素是否有问题的标签.

...but I moved it above there, and it is still not working, and not seen via F12 | Inspect element for the label in question.

我将对Site.css的引用移至bootstrap.css文件下，该文件确实的确改变了该文本的外观，但是仍然没有斜体显示，并且在元素检查器中仍然没有看到...

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...

以下是HTML下降的方式:

Here's how the HTML is coming down:

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

...这是我在Site.css中的CSS规则:

...and here's my css rule in Site.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协议的违规做法，应该由某些世界机构来裁决.再说一次，我可能在某个地方犯了一些愚蠢的错误.

...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.

推荐答案

您是否尝试过将选择器置于类的最前面?

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;
}

通常，它将增加CSS声明的权重.我的错误...选择器和类之间应该没有空格.ID也一样.例如:

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:

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

您将使用以下样式:

div#first p#myParagraph {
     color : #ff0000;
}

仅使用一个类来制作一个完整的示例:

Just to make a complete example using a class:

div#first p#myParagraph span.bolder{
    font-weight:900;
}

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

For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html

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

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样式没有被应用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！