Question

我的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>标记，为什么？

（稍后编辑）---＆gt;奇怪的是，它似乎在10分钟后自发地开始工作，只是查看代码并刷新即使我没有做任何事情

Answer 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覆盖级联 - 但如果您以正确的顺序声明规则，则更容易维护。

Answer 2

这根本不奇怪。这是浏览器缓存。 CSS文件很常见，所以从现在开始，请务必先检查一下。

Answer 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的{{1}}标记优先使用此类。

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

为什么我的CSS类不会加载？

4 个答案: