Question

我有一个CSS类，它应该使标题菜单中元素的背景变暗。我尝试将许多不同的东西应用于它，例如：

.menu-highlight;悬停; 。活性; .current_page_item; 。当前菜单项a; .current-menu-parent a; .current-菜单祖先; .current_page_parent a; .current_page_item .sub-mena a; ：active，：focus。

它们都不起作用，在使用检查器工具进行搜索时，我也没有在CSS规则中看到它。它很可能被另一条规则覆盖，但是我似乎找不到哪条规则。这是css类：

ul.test li.active a{
    background-color: #808080;
    color: #fcfcfc;
    float: left;
}

这里是通过JS脚本而不是类https://jsfiddle.net/mguxsj10/进行应用的链接。这就是我要实现的目标。但是我不想使用JavaScript，而是想使用CSS。

编辑：给您一个显示问题的示例，从上方从jsfiddle中删除JS代码，然后测试菜单。就是这样：https://jsfiddle.net/wkurv56x/，而这正是我的问题。不管我在此CSS类中添加什么，它始终像没有JS代码的jsfiddle示例中一样。

Answer 1

如果找不到它，请尝试添加！important，但不建议使用它，因为它不能被覆盖。像

ul.test li.active a{
    background-color: #808080 !important;
    color: #fcfcfc !important;
    float: left !important;
}

或仅向您的元素添加一个id并添加css规则，因为id具有最高的特异性。

Answer 2

解决方案是在每个需要覆盖的自定义样式之后添加！important 。我相信这是实现预期行为所需要的：

 ul.test li.active a{
        background-color: #808080 !important;
        color: #fcfcfc !important;
        float: left !important;
    }

这是一个小提琴音乐链接，其中包含https://jsfiddle.net/w3br10ve/实现的替代样式

Answer 3

据我所知，您希望单击的项目具有深色背景。好吧，您必须使用JS来提供此功能，因此您必须触发Click侦听器并将活动类添加到该项目。您正在尝试为活动类别添加深色背景，但没有在点击时添加活动类别。

Answer 4

如果没有JS代码，您的代码将无法工作，因为您正在通过其中添加和删除活动类。当您单击li时，会将活动类添加到其中，并从其他所有内容中删除活动类。然后您将样式写入到CSS代码中。如果您需要更改背景依赖于单击，则必须添加js以动态添加和删除它。

function isValidHorizontal(sudoku) {
    let numbersFind = [];
    for (var i = 0; i < sudoku.length; i++) {
        const arrayH = sudoku[i];
        for (var j = 0; j < arrayH.length; j++) {
            if (numbersFind.includes(arrayH[j])) {
                return false;
            } else {
                numbersFind.push(arrayH[j]);
            }
        }
        numbersFind.length = 0;
    }   

    return true;
}

function isValidVertical(sudoku) {
    let numbersFind = [];
    let pos = 0;

    for (var i = 0; i < sudoku[0].length; i++) {
        for (var j = 0; j < sudoku.length; j++) {
            if (numbersFind.includes(sudoku[j][pos])) {
                return false;
            } else {
                numbersFind.push(sudoku[j][pos]);
            }
        }
        numbersFind.length = 0;
        pos = 0;
    }

    return true;
}

为什么我不能将其他CSS元素应用于自定义CSS类？

4 个答案: