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文件的布局文件。

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

更新

我想也许问题是我在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）来应用新的样式，看起来那些旧的真的被缓存了＃34;深度＆＃34;。

This question/answer可能对某人派上用场。对于那些不使用Chrome的人来说，hard refresh tips for different browsers。

Answer 5

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

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

但是尽量不要过度使用，因为它很容易陷入CSS-hell。

Answer 6

我知道这是一个老帖子，但我想我可能会为遇到类似问题的人添加一个想法。我假设您使用的是ASP.NET MVC，因为您提到了 site.css 。

检查 Bundles.config 文件，看看您是否BundleTable.EnableOptimizations = true;如果你不这样做，那么这可能是你的问题，因为这样可以让程序成为捆绑包并且＆＃34;缩小＆＃34; 。根据您是否在调试模式下运行，这可能会产生影响。

Answer 7

对我来说，问题是服务的.css文件的内容类型不正确（如果它包含某些unicode字符）。

将内容类型更改为has_paper_trail on: [:create, :update], class_name: "Bus::BookingVersion", meta: { status: Proc.new { |t| t.status if t.status_changed? } }解决了问题。

Answer 8

除了上面发布的解决方案，遇到完全相同的问题，请务必检查您的HTML。更具体地说，您是否已正确标记了元素，以及类和id选择器。您可以手动或通过验证器（https://validator.w3.org/）执行此操作。

对我来说，我错过了课程旁边的等号（<?php //if "email" variable is filled out, send email if (isset($_REQUEST['email'])) { //Email information $admin_email = "Silicon.abhishekp@gmail.com"; $email = $_REQUEST['email']; $subject = $_REQUEST['subject']; $comment = $_REQUEST['comment']; //send email mail($admin_email, "$subject", $comment, "From:" . $email); //Email response echo "Thank you for contacting us!"; } //if "email" variable is not filled out, display the form else { ?> <form method="post"> Email: <input name="email" type="text" /><br /> Subject: <input name="subject" type="text" /><br /> Message:<br /> <textarea name="comment" rows="15" cols="40"></textarea><br /> <input type="submit" value="Submit" /> </form> <?php } ?> vs <div class someDiv>＆gt ;,因此没有应用CSS属性。

Answer 9

这里的一个关键点可能是 CSS 规则的传播方式。有些规则比其他规则更重要，因此 CSS 规则并不总是以您想象的方式“级联”。这种 CSS 规则的优先级被称为 specificity - 请参阅（例如）description at w3schools.com

因此，如果 DIV 中有 P 元素，则可以使用例如

来控制字体颜色

DIV P.highlight { color: red; }

如果你有后续的 CSS 指令，比如

.highlight { color: green; }

那么它不会覆盖之前的指令。这让我很困惑，尤其是在加载多个 CSS 文件并天真地认为我可以覆盖早期的 CSS 时。

Answer 10

我仅在某些元素（表格行）上应用了自定义样式。我使用引导程序。这是由“table-striped”类引起的。删除后，所有必需的行都会正确应用自定义类。

Answer 11

在我的情况下，发生这种情况是因为我正在另一个具有相同名称的文件中进行更改，并试图查看不同的结果

Answer 12

就我而言，我在错误的位置将一个类嵌套在SASS文件中...

Answer 13

我也遇到了这个问题。以及解决方法！

我的CSS文件名是gt.css。我正在使用Visual Studio（例如2017）。

我去了解决方案资源管理器（按Ctrl + Alt + L）并搜索了gt.css （输入您的CSS文件名）。右键单击您的CSS文件名，然后在Bundler和Minifier上（当前第4个选项），然后重新捆绑文件（或直接按Shift + Alt + F）。
保存所有未保存的文件，然后清空缓存并重新加载Web浏览器。

您可以了解有关Bundler和Minifier here的更多信息。

Answer 14

清除缓存和cookie并重新启动浏览器。由于网站浏览器的样式不经常更改，因此请存储它。

Answer 15

对我来说，这是Sources中的本地覆盖 - ＆gt;覆盖。每当您更改页面样式时，文件都会在本地保存，并且chrome使用该文件覆盖服务器的css。

Answer 16

我的CSS样式没有被应用的推理，即使它们被加载了：

加载样式表的media标记上的link属性值不正确。我无意中将其设置为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" />

Answer 17

我有类似的问题，这是由CSS评论中的一个简单错误造成的。

我使用JavaScript //方式而不是/ * * /编写了一条评论，这使得后续的css类中断，但所有其他CSS都按预期工作。

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

更新

更新2

17 个答案: