与用新类覆盖现有 CSS 类相关的问题答案

【问题标题】：Issue related to Overriding existing CSS class with new Class与用新类覆盖现有 CSS 类相关的问题
【发布时间】：2014-04-25 07:28:39
【问题描述】：

我有带有 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 中没有插入任何值时，当用户单击按钮时，它可以正常工作并将左边框设置为红色

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

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

谢谢

【问题讨论】：

是申请inline-style还是通过类？？

标签： html asp.net css telerik

【解决方案1】：

尝试使用 :hover 伪类覆盖 .validation 类来覆盖样式表：

.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;
}

【讨论】：