如何覆盖其他css类在css类中给出的宽度答案

【问题标题】：how to override the width given in css class by other css class如何覆盖其他css类在css类中给出的宽度
【发布时间】：2018-01-11 06:31:39
【问题描述】：

我使用两个 css 类进行下拉控件，第一个 css 适用于所有下拉菜单，第二个仅适用于那些在自定义标签中具有特定值的下拉菜单（data-view="readonly-edit"）。在第一个 css 中，我使用 width:auto;默认情况下完全展开它，但如果任何下拉列表具有自定义标记 (data-view="readonly-edit") 则不想将宽度：自动应用于该控件，该控件应使用宽度为在它们的宽度属性中给出。

我的问题是如何用控件属性本身给出的宽度覆盖“width:auto”。

按照示例代码进行

CSS

.DropdownList {
    border-radius: 5px;
    -webkit-border-radius: 5;
    font-family: Calibri,"Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 4px 1px 4px 1px;
    border: none;
    color: #000000 !important;
    line-height: 1;
    font-size: 13.5px;
    background-color: transparent;
    pointer-events: none;
    -ms-user-select: none;
    tab-index: -1;
    cursor: default;
    opacity: 1 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    width:auto !important;
}

.DropdownList[data-view=readonly-edit] {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    padding: 5px 2px 5px 2px;
    border: 1px solid #7D7D7D;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color: #1E2935;
    line-height: 1.4285;
    pointer-events: auto;
    -ms-user-select: auto;
    cursor: auto;
    background-color: white !important;
    opacity: 1 !important;  

    width:0px; /*here it should auto inherit the width 
                 from control width property itself and override the 
                 width:auto given in above css*/      
}

aspx

自动为这个 DropDownList 应用宽度

<asp:DropDownList ID="ddlAutoWithDropDown" CssClass="DropdownList" Width="110Px" runat="server">

控件本身的宽度应该适用于这个 DropDownList

<asp:DropDownList ID="ddlFixedWithDropDown" data-view="readonly-edit" CssClass="DropdownList"  Width="220Px" runat="server">

【问题讨论】：

您需要为选择器.DropdownList[data-view=readonly-edit] 的width 属性使用!important 声明，因为您已将它用于.DropdownList 类的width 属性。您将 over-qualify 具有 !important 声明的规则的唯一方法是使用具有 lower 声明的 !important 声明的 another 规则i> 在级联顺序中或具有更高的特异性。
How to override !important?的可能重复
我还要说它是重复的。我本来想说你可以使用特异性规则，然后在 SO 帖子中找到了相同的建议。

标签： css asp.net

【解决方案1】：

你可以在里面使用一个样式标签，它提供一个 with 属性并在里面写上重要的

<asp:DropDownList ID="ddlAutoWithDropDown" CssClass="DropdownList" style="width:110px !important;"runat="server">

【讨论】：

我会谨慎建议这种方法，因为通常没有办法用!important 过度限定声明为 inline 的样式规则声明。
感谢@Syed Munis Ali，我上面给出的下拉列表只是一个示例，我的应用程序中存在数百个控件，无法更新每个控件样式属性宽度！重要。如果可能的话，我需要任何通用的方法。
这只是用元素覆盖css类的最好方法！
哦，梅恩！伙计，你应该在你的问题中强调！你有成千上万个这样的国家，这个下拉列表只是一个例子！但我知道我有另一个 [合适的解决方案
有更好的方法被认为是更好的实践。如果您认为您的解决方案是最好的方法，请考虑在您的问题中解释原因，以便其他读者理解。

【解决方案2】：

我使用jquery明确地重新分配控件宽度，如下所示

$(document).ready(function () {
    SetAutoWidth();    
});

function SetAutoWidth() {
var ddl = $("select");
ddl.each(function () {

        if (GetAttributeValue($(this), 'data-view') == 'readonly-edit') {
            $(this).attr('style', 'width:' + $(this)[0].style.width + ' !important');
            return;
        }
    } 
}

function GetAttributeValue(objectElement, attributeName) {
    var result = '';
    if (typeof (objectElement.attr(attributeName)) != 'undefined') {
        result = objectElement.attr(attributeName);
    }
    return result;
}

看来这已经解决了我的问题。

【讨论】：