Question

CSS声明无法在浏览器中显示有什么原因吗？

以下是我的CSS文件示例：

.adv {
color:#47463D;
}

.earnings {
color:#B4FF00;
}

当我<font class=adv>hello</font>时，它会有效。

当我执行<font class=earnings>hello</font>时，为.earnings指定的颜色不会显示在浏览器中。

该页面链接到正确的CSS文件。

Answer 1

您可能在页面的某个位置有一种样式，其特性取代.earnings（请参阅this page）。 CSS按重量比例应用，因此任何具有较高权重（计算出的特异性）的内容优先于您认为可能应用的内容。

最好的办法是使用Firebug（firefox扩展程序）或Chrome的检查程序来查看实际应用的样式

。

Example（顺便说一下，CSS order is irrelevant）

<style> /* what you think is applied */ .foo { color: red; } /* What is being applied due to specificity */ #bar .foo { color: green; } </style> <span class="foo">.foo</span>  <div id="bar"> <span class="foo">#bar .foo</span>  </div>

Answer 2

确保用引号括住参数值。您还需要确保您的代码匹配

<a class="adv">hello</a>
<font class="earnings">hello</font>

最后，如果.earnings中有多个css参数，则需要在每个参数后添加一个分号。

Answer 3

CSS声明中的最后一个分号是可选的，所以这不是你的问题。

您很可能应用了具有更高优先级的其他样式。 CSS优先级规则可能有点奇怪;最常见的绊脚石是高度特定的声明优先于后续声明不太具体

来自HTMLdog.com的示例：

  div p { color: red; }
  p { color: blue; }

使用该样式表，div中的任何p元素都将显示为红色，而不是蓝色。

我真正建议您为浏览器获取一个不错的开发人员工具插件（例如Firefox上的Firebug），并查看样式跟踪;它会告诉你什么被覆盖，以及什么。

Answer 4

在颜色线后添加分号。

.adv {
color:#47463D;
}

.earnings {
color:#B4FF00;
}

此外，您应该在html中使用双引号，以及匹配的结束标记：

<font class="earnings">hello</font>

您的第二个字体标记在第一个字体标记内被解析，而不显示。

Answer 5

我不确定您是否打算使用标记关闭字体标记，但以下代码可以正常工作：

<html>
  <head>
    <title>CSS Color Example</title>
    <style type="text/css">
      .adv {color:red;}
      .earnings {color:red;}
    </style>
  </head>
  <body>
    <div class=adv>hello</div>
    <div class=earnings>hello</div>
  </body>
</html>

Answer 6

使用firebug，使用元素检查器（因为我不记得分号和引号在class属性中是强制性的）并尝试查看其他选择器涉及类“收益”。< / p>

您可以提出问题的jsfiddle示例吗？

为什么这个CSS声明不会显示？

6 个答案: