Question

我正在尝试使用个性化面板中的附加自定义CSS覆盖Wordpress中菜单当前所选li元素的菜单背景颜色，但是它不适用于特定的类。

我在chrome中按F12键以获取元素类名称，并对其进行了引用，但它适用于其他类。

This is working OK, color is changing:
.activity-list.item-list.bp-list  {
    background-color: #ffd6d6;
}

The element is <ul class="activity-list item-list bp-list">

This is Not working, color is not changing:
.bp-personal-tab.current.selected.loading {
    background-color:  green;
}

The element is <li id="groups-personal-li" class="bp-personal-tab current selected loading">

我已经搜索了互联网以尝试理解，我得到了一些结果，说应该使用“点”样式，因此对于我来说，很难理解为什么第一个有效，而第二个无效

一个人有一个ID而另一个人却没有的事实吗？

Answer 1

有时，这取决于替换样式后加载的内容。尝试使用!important覆盖现有样式。

.bp-personal-tab.current.selected.loading {
    background-color:  #5FB97D !important;
}

Answer 2

这与CSS的特殊性有关。您的主题CSS中可能对此元素有一个更特定的规则，因此可以应用一个规则而不是您的规则。

如果可以使选择器更具体，则应应用它。

您要如何精确地定位，具体取决于您的HTML以及要实现的目标。如果仅与单个元素有关，则可以使用ID作为示例（它总是比类更具体）。

    #groups-personal-li { ...}

Wordpress自定义CSS不适用于特定的班级

2 个答案: