html - 与用新类覆盖现有 CSS 类相关的问题

Question

我有带有 telerik 控件的 asp.net web 应用程序。

我在 .aspx 页面中有以下文本框:

 <telerik:RadTextBox ID="txtSearch" runat="server" Height="15" Width="115">
</telerik:RadTextBox>

我已经验证

d textBox using JQuery as follows:

 $('#btnSearch').click(function () {
                if ($('#txtSearch_text').val() == '') {
                    $('#txtSearch_text').addClass('validation');
                    return false;
                }
                else {
                    $('#txtSearch_text').removeClass('validation');
                }
            });

在验证类中，我将 Border-left 属性设置为 1px solid Red当用户在 txtSearch TextBox 中没有插入任何值时单击按钮时，它工作正常并设置 border-left 为红色

现在的问题是，当我将鼠标悬停在 RedTextBox 上时。 Telerik 的内置 css 样式表执行，我将 Border-left 属性丢失为 none；

如何停止执行 telerik 的内置样式表并放置我的自定义 css？？

谢谢

Answer 1

尝试通过在 .validation 类上使用 :hover 伪类来覆盖样式表:

.validation,
.validation:hover {
    border-left: 1px solid Red;
}

或更高的specificity value ，如果需要的话:

#parent .validation,
#parent .validation:hover {  /* Use a selector having higher specificity value */
    border-left: 1px solid Red;
}

最后，您可能需要使用 !important 关键字来覆盖内联样式:

.validation,
.validation:hover {
    border-left: 1px solid Red !important;
}