55

我有这个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 is so sweet pain!”）是斜体的，并且字体与被引用者的名字（Bill Rattleandrollspeer）不同，因为它的 span 标签附加了“fancify”类. 当然应该看到这个类，因为它出现的文件引用了使用 Site.css 文件的布局文件。

我现在犯了什么菜鸟错误？

更新

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

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

...但我把它移到那里，它仍然无法正常工作，并且通过 F12 看不到 | 检查相关标签的元素。

我将 Site.css 的引用移到 bootstrap.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 协议的破坏，应该由一些世界机构来裁决。再说一次，我可能在某个地方犯了一些愚蠢的错误。

4

16 回答 16

75

CSS 文件中可能有一个错误导致您的（正确的）CSS 无法工作。

于 2014-08-20T17:18:33.830 回答
51

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

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/

于 2013-05-13T02:05:01.073 回答
43

发布，因为它可能对将来的某人有用：

对我来说，当我到达这里时，解决方案是浏览器缓存。必须硬刷新 Chrome (cmd/ctrl+shift+R) 才能应用新样式，看来旧样式被缓存得很“深”。

这个问题/答案可能对某人有用。为不使用 Chrome 的用户提供不同浏览器的硬刷新提示。

于 2017-03-28T07:55:40.517 回答
25

当一条规则被忽略而其他规则没有被忽略时，我快疯了。通过验证器运行您的 CSS 并查找解析错误。

我不小心使用 // 作为注释而不是 /* */ 导致奇怪的行为。我的 IDE 对此只字未提。我希望它可以帮助某人。

于 2015-10-08T21:13:02.083 回答
5

也许您的跨度正在继承一种样式，该样式强制其文本为正常而不是您希望的斜体。如果您无法让它按照您的意愿工作，您可以尝试将您的字体样式标记为重要。

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

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

于 2013-05-13T02:33:23.507 回答
3

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

检查你的Bundles.config文件，看看你是否有BundleTable.EnableOptimizations = true；如果你不这样做，那么这可能是你的问题，因为这允许程序被捆绑和“缩小”。取决于您是否在调试模式下运行，这可能会产生影响。

于 2017-05-21T14:55:39.453 回答
3

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

更改内容类型以text/css解决问题。

于 2017-06-22T09:56:31.433 回答
2

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

对我来说，我错过了类旁边的等号（<div class someDiv>vs <div class = "someDiv">，因此没有应用 CSS 属性。

于 2016-09-27T04:06:49.580 回答
1

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

于 2018-05-22T11:52:11.163 回答
1

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

于 2021-06-02T10:37:42.207 回答
1

我也遇到过这个问题。这就是如何解决的！

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

  • 我去了解决方案资源管理器（按 Ctrl+Alt+L）并搜索 gt.css（输入您的 css 文件名）。右键单击您的 css 文件名，然后单击 Bundler 和 Minifier（当前是第 4 个选项），然后单击 Re-Bundle 文件（或直接按 Shift+Alt+F）。
  • 保存任何未保存的文件，然后清空缓存并重新加载您的网络浏览器。

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

于 2019-04-18T05:41:18.357 回答
1

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

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

于 2017-05-03T14:34:36.240 回答
1

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

于 2019-02-18T03:17:13.210 回答
1

我的 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" />
于 2017-06-10T22:34:36.827 回答
1

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

所以，如果你在 DIV 中有一个 P 元素，你可以控制字体颜色，比如说，

DIV P.highlight { color: red; }

如果您有稍后的 CSS 指令，例如

.highlight { color: green; }

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

于 2021-07-06T15:05:26.367 回答
0

硬重新加载你的 chorome Shift+F5

于 2021-11-05T09:33:23.157 回答