Question

在我的CSS中我有这个规则：

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover, .ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
        font-weight: none;
        background-image: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: black;
        background-color:#d2d6de !important;
    }

因此，在PrimeFaces中，所有悬停的组件都会采用此规则，但我不希望具有类.ui-inputfield的组件采用background-color:#d2d6de !important;，所以这就是我尝试过的（在第一条规则之后）：

.ui-inputfield .ui-state-hover,
.ui-widget-content .ui-inputfield .ui-state-hover,
.ui-widget-header .ui-inputfield .ui-state-hover{
    background-color: none !important;
}

但是当我悬停或聚焦这些组件时，它不起作用且背景颜色始终为#d2d6de，请注意，当我们悬停它时，PrimeFaces中的任何组件都会始终使用.ui-state-hover

我该如何解决这个问题？

Answer 1

您创建更具体的规则的方法是正确的，但您的选择器是错误的。类ui-inputfield和ui-state-hover都在同一元素上。您编写它的方式，ui-state-hover位于具有类ui-inputfield的元素的子元素上。输入字段的情况并非如此;这两个类都在同一个元素上，所以你的选择器应该是：

.ui-inputfield.ui-state-hover { ... }

所以，没有空间。

在primefaces中覆盖css规则

1 个答案: