为什么我的 CSS 类无法加载？答案

【问题标题】：Why won't my CSS classes load?为什么我的 CSS 类无法加载？
【发布时间】：2011-06-16 10:48:59
【问题描述】：

我的 PHP 看起来像这样（它在 while 循环中）：

 print"<li>
   <a class='topcategory' href='index.php?category=$encode'>$category[name]</a>
 </li>";

我的 CSS 如下所示：

.topcategory {
    display: block;
    float: right;
    height: 20px;
    padding: 10px 20px 0 20px;
    border: none;
    font-size: 85%;
    font-weight: bold;
    color:#333;
    text-decoration:none;
    text-align:center;
}

但它根本不影响我的<a> 标签，为什么？

（稍后编辑）--->很奇怪，即使我没有做任何事情，只要查看代码并刷新 10 分钟后，它似乎就自发地开始工作了

【问题讨论】：

你能告诉我们它生成的 HTML 吗？你的 CSS 是在哪里定义的？在 .css 文件中还是作为 HTML 的一部分？
@user 在 Chrome 的开发者工具中检查该元素并检查应用了哪些样式以及它们来自何处...
您能否发布生成的 html，因为我尝试了样式并且效果很好。
您确定您的 CSS 已正确包含和加载吗？
@user783476，每当您处理 javascript 或 css 并不断刷新页面时，1) 确保您没有通过按 CTRL+F5 来加载缓存资源和 2) 确保所有参考路径如果您使用的是源代码控制机制，那么您正在处理的分支是正确的。

标签： html css class

【解决方案1】：

我所有的例子都假定 HTML 是...

<li>
    <a href="#" class="topcategory">Example</a>
</li>

当您编写 CSS 时，样式规则的顺序很重要，所以如果您有这样的规则...

.topcategory {
     color: red;
}

a {
    color: blue;
}

CSS 遵循您的顺序，“a”的规则将覆盖“.topcategory”的规则。

您可以通过几种方式解决这个问题，但最简单的方法是按照通用性/特殊性的顺序声明规则，因此先声明您最通用的规则，然后再以更具体的方式声明规则...

在这个例子中，我们首先声明非常通用的标签名，然后是稍微具体的标签名，然后是非常具体的标签名，然后是类名，最后是 id。使用此顺序意味着 CSS 的级联特性会将最具体的规则应用于您的元素。

body {
    color: Silver;
}

div {
    color: Orange;
}

p {
    color: Yellow;
}

a {
    color: Blue;
}

.topcategory {
    color: red;
}

.topcategory span {
    color: black;
}

#someid {
    color: Aqua;
}

#someid span {
    color: Green;
}

您可以使用 !important 覆盖级联 - 但如果您以正确的顺序声明规则，则维护起来会容易得多。

【讨论】：

【解决方案2】：

一点也不奇怪。这是浏览器缓存。这在 CSS 文件中很常见，所以从现在开始，一定要先检查一下。

【讨论】：

【解决方案3】：

li a.topcategory {
    display: block;
    float: right;
    height: 20px;
    padding: 10px 20px 0 20px;
    border: none;
    font-size: 85%;
    font-weight: bold;
    color:#333;
    text-decoration:none;
    text-align:center;
}

如果您在 CSS 的其他位置为 a 标签定义了另一条规则，则此规则将覆盖这些规则，并强制此类的优先级高于 a 带有类 topcategory 的标签。

【讨论】：

这只会使其他具有topcategory 类的元素不会受到影响。
这只是一个更严格的规则，原来的规则应该也可以。
@Kokos：你怎么知道他想在别处使用那个类，除了a 标签？
@Aston：是的，如果他在别处为li a 标签定义了另一条规则，则可能对他有用。这将覆盖这些规则。
@bazmegakapa 反对票的定义是“这个答案没用”。任何有价值的答案（如本例）都不符合该描述。也许它不值得赞成，但这并不意味着它应该因此被反对。

【解决方案4】：

试试这个

print "<li>
   <a class='topcategory' href='index.php?category=".$encode."'>".$category['name']."</a>
 </li>";




<style> 
   .topcategory {
        display: block !important;
        float: right !important;
        height: 20px !important;
        padding: 10px 20px 0 20px !important;
        border: none !important;
        font-size: 85% !important;
        font-weight: bold !important;
        color:#333  !important;
        text-decoration:none !important;
        text-align:center !important;
    }

</style>

【讨论】：