php - 为什么我的 CSS 没有按应有的方式改变？

Question

我将以下 HTML 与一些 PHP 结合使用：

echo "<a href='" . $_SERVER["PHP_SELF"] . "?guess=" . $value . "' class='already-guessed'>" . $value . "</a>\n";

如果它已经被猜到，它会应用一个特殊的类，正如类所暗示的那样。如果没有猜到，我有这个：

echo "<a href='" . $_SERVER["PHP_SELF"] . "?guess=" . $value . "'>" . $value . "</a>\n";

这是相关的CSS：

.letters a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 3px 6px 0;

    background: #5ac9ff;
    color: #fff;
    line-height: 2.5em;
    text-align: center;
    text-decoration: none;
}

    .letters a:nth-child(10n) {
        margin: 0 0 8px 0;
    }

    .letters a:hover {
        background: #54bff3;
    }

    .letters a:active {
        background: #4fb4e4;
    }

.already-guessed {
    background: green;
}

所以我只是让它检测所有锚点。

Answer 1

锚点的选择器具有优先权。更改.already-guessed类的代码如下：

.already-guessed {
    background: green !important;
}

或者，如果您愿意，可以更新选择器：

.letters a.already-guessed {
    background: green;
}