css - 如何覆盖其他CSS类在CSS类中给出的宽度

Question

我使用两个 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">

Answer 1

你可以在里面使用一个 Style 标签，提供一个 with 属性并在里面写上 important

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